Dropdown header button

Solved

Dropdown header button

UncleGym
Excursionist
14 0 5

Hi all, 

 

I have created drop down menus for a couple things on my header, but i would like the main header word to be a button too. 

www.unclegym.co.uk

Password - 12345

 

I have pages named 'Body' and 'Brain' and i would like to link these to the header as well as having the dropdown menu. 

 

Any help/code will be much appreciated. Thank you!

Accepted Solution (1)
round
Shopify Partner
113 18 10

This is an accepted solution.

@UncleGym hope you are well,

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) base.css and paste this code on the end



.header__menu-item .icon-caret {
    right: 20px;
}
.list-menu--inline {
    align-items: center;
}

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.

View solution in original post

Replies 8 (8)

round
Shopify Partner
113 18 10

@UncleGym,
Hope you are well,
you need add some code, on your menu file
you can found file on theme 

like: theme folder > snippets > header-dropdown-menu.liquid
after that you will found   {{- link.title | escape -}}
now just replace with this  

 <a
            id="HeaderMenu-{{ link.handle }}"
            href="{{ link.url }}"
            class="header__menu-item list-menu__item link link--text focus-inset"
            {% if link.current %}
              aria-current="page"
            {% endif %}
          >
            <span
              {%- if link.current %}
                class="header__active-menu-item"
              {% endif %}
            >
              {{- link.title | escape -}}
            </span>
          </a>

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

 

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
UncleGym
Excursionist
14 0 5

This does work, and thank you for that, but it is messing up the positions of the buttons.

Could to take a look at the website and see if this can be fixed?

 

Thank you Round!

round
Shopify Partner
113 18 10

@UncleGym, give me the website URL so that I can take a look, yes this is possible 

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
UncleGym
Excursionist
14 0 5

The website is www.unclegym.co.uk 

Password - 12345

Thank you!

round
Shopify Partner
113 18 10

This is an accepted solution.

@UncleGym hope you are well,

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) base.css and paste this code on the end



.header__menu-item .icon-caret {
    right: 20px;
}
.list-menu--inline {
    align-items: center;
}

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
UncleGym
Excursionist
14 0 5

Thank you round, it worked! But they are now spaced out more than the other header buttons. How can i make the gap smaller?

Thank you!

round
Shopify Partner
113 18 10

can we talk in Google Meet? so that I can understand easily what you said thank you

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
round
Shopify Partner
113 18 10

 if this solution is helpful to you please like and "Accept the solution". thank you @UncleGym 

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.