Brooklyn theme - move header icons to the right

[Tresorbytanya]

Hello!

I would like to move the log in, search, and cart buttons to the right of the page. See attached photo.

Thank you and I appreciate the help.

[Tresorbytanya]

Solution was found!

Replace header.liquid with the following:

{%- style -%}
.header-icon {
float: right;
}
{%- assign logo_max_width = section.settings.logo_max_width -%}
{%- assign header_color = section.settings.header_color -%}

{%- if section.settings.transparent_header_enable and request.page_type == ‘index’ -%}
{%- assign header_color_transparent = section.settings.transparent_header_color -%}

.header-wrapper.header-wrapper–transparent .site-nav__link,
.header-wrapper.header-wrapper–transparent .site-header__logo a {
color: {{ header_color_transparent }};
}

.header-wrapper.header-wrapper–transparent .site-header__logo a:hover,
.header-wrapper.header-wrapper–transparent .site-nav__link:hover,
.header-wrapper.header-wrapper–transparent .site-nav__link:focus,
.header-wrapper.header-wrapper–transparent .site-header__logo a:focus {
color: {{ header_color_transparent | color_modify: ‘alpha’, 0.75 }};
}

.header-wrapper.header-wrapper–transparent .site-nav–has-dropdown.nav-hover > .site-nav__link {
color: {{ header_color }};
}

.header-wrapper.header-wrapper–transparent .burger-icon,
.header-wrapper.header-wrapper–transparent .site-nav__link:hover .burger-icon {
background: {{ header_color_transparent }};
}
{%- endif -%}

.header-wrapper .site-nav__link,
.header-wrapper .site-header__logo a,
.header-wrapper .site-nav__dropdown-link,
.header-wrapper .site-nav–has-dropdown > a.nav-focus,
.header-wrapper .site-nav–has-dropdown.nav-hover > a,
.header-wrapper .site-nav–has-dropdown:hover > a {
color: {{ header_color }};
}

.header-wrapper .site-header__logo a:hover,
.header-wrapper .site-header__logo a:focus,
.header-wrapper .site-nav__link:hover,
.header-wrapper .site-nav__link:focus,
.header-wrapper .site-nav–has-dropdown a:hover,
.header-wrapper .site-nav–has-dropdown > a.nav-focus:hover,
.header-wrapper .site-nav–has-dropdown > a.nav-focus:focus,
.header-wrapper .site-nav–has-dropdown .site-nav__link:hover,
.header-wrapper .site-nav–has-dropdown .site-nav__link:focus,
.header-wrapper .site-nav–has-dropdown.nav-hover > a:hover,
.header-wrapper .site-nav__dropdown a:focus {
color: {{ header_color | color_modify: ‘alpha’, 0.75 }};
}

.header-wrapper .burger-icon,
.header-wrapper .site-nav–has-dropdown:hover > a:before,
.header-wrapper .site-nav–has-dropdown > a.nav-focus:before,
.header-wrapper .site-nav–has-dropdown.nav-hover > a:before {
background: {{ header_color }};
}

.header-wrapper .site-nav__link:hover .burger-icon {
background: {{ header_color | color_modify: ‘alpha’, 0.75 }};
}

.site-header__logo img {
max-width: {{ logo_max_width | append: ‘px’ }};
}

@media screen and (max-width: 768px) {
.site-header__logo img {
max-width: 100%;
}
}
{%- endstyle -%}

{% include 'drawer-menu' %}

{% if section.settings.show_announcement %} {% if section.settings.home_page_only == false or request.page_type == 'index' %} .announcement-bar { background-color: {{ section.settings.color_bg }}; }

.announcement-bar–link:hover {
{% assign brightness = section.settings.color_bg | color_brightness %}

{% if brightness <= 192 %}
{% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
{% else %}
{% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
{% endif %}
}

.announcement-bar__message {
color: {{ section.settings.color_text }};
}

{% if section.settings.link == blank %}

{% else %} {% endif %}

{{ section.settings.text | escape }}

{% if section.settings.link == blank %}

{% else %} {% endif %}

{% endif %}
{% endif %}

{{ 'general.drawers.navigation' | t }}

{% comment %} Use the uploaded logo from theme settings if enabled. Site name gets precedence with H1 tag on homepage, div on other pages. {% endcomment %} {% if request.page_type == 'index' %}

{% else %}

{% endif %} {% capture image_size %}{{ logo_max_width | escape }}x{% endcapture %} {% if section.settings.logo %}

{% if request.page_type == ‘index’ and section.settings.transparent_header_enable %}
{% if section.settings.transparent_logo == blank %}
{%- assign transparent_logo = section.settings.logo -%}
{% else %}
{%- assign transparent_logo = section.settings.transparent_logo -%}
{% endif %}

{% endif %}
{% else %}
{{ shop.name }}
{% endif %}

{% if request.page_type == ‘index’ %}

{% else %}

{% endif %}

{% comment %} List out your main-menu linklist (default)

More info on linklists:

• http://docs.shopify.com/themes/liquid-variables/linklists
  {% endcomment %}

{% for link in linklists[section.settings.main_menu_link_list].links %} {% if link.links != blank %} {% assign parent_index = forloop.index %}
• {{ link.title | escape }}
  {% for childlink in link.links %} {% if childlink.links != blank %} {% assign child_index = forloop.index %}
  • {{ childlink.title | escape }}
    {% for grandchildlink in childlink.links %} {{ grandchildlink.title | escape }} {% endfor %}
  {% else %} {{ childlink.title | escape }} {% endif %} {% endfor %}
{% else %}
• {{ link.title | escape }}
{% endif %} {% endfor %}

{% comment %}
Remove comment tags below to add a search box to your header, visible on screens where your header menu
is displayed inline.

• {% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--header' %}
{% endcomment %}
{% if shop.customer_accounts_enabled %}
{% if customer %} {{ 'layout.customer.account' | t }} {% else %} {{ 'layout.customer.log_in' | t }} {% endif %}
{% endif %}
{% if section.settings.search == ‘page’ or section.settings.search == ‘modal’ %}
{% assign search_modal = true %}
{% if section.settings.search == ‘page’ %}
{% assign search_modal = false %}
{% endif %}
{{ 'general.search.title' | t }}
{% endif %}
{{ 'layout.cart.title' | t }}

{{ 'layout.cart.title' | t }}