Unhiding burger menu icon on Narrative Theme

Highlighted
New Member
3 0 0

Hi Team

So when I first built the site https://xtraprotect.com/ I was asked to hid the menu icon. Which I did either by making it also white or transparent I can't recall. I now want to show it again but can't remember how to reverse what I did. Right now if you over in the top left corner you'll see you can click the menu and it will open, you just can't see the 3 bar burger menu.

Can anyone help me reverse what smarter me did a few months back, please?

0 Likes
Highlighted

Hello @gregdale 

You want changes like attached screenshot please check 

menu-icon.png

You need to changes in header.liquid file, Add below code in header.liquid file find <button class="site-header__navigation btn btn--clear btn--square"> in this place replace following code

<button class="site-header__navigation btn btn--clear btn--square" aria-expanded="false" data-navigation-button="">
        <svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 24.75 24.75" style="enable-background:new 0 0 24.75 24.75;" xml:space="preserve">
<g>
	<path d="M0,3.875c0-1.104,0.896-2,2-2h20.75c1.104,0,2,0.896,2,2s-0.896,2-2,2H2C0.896,5.875,0,4.979,0,3.875z M22.75,10.375H2   c-1.104,0-2,0.896-2,2c0,1.104,0.896,2,2,2h20.75c1.104,0,2-0.896,2-2C24.75,11.271,23.855,10.375,22.75,10.375z M22.75,18.875H2   c-1.104,0-2,0.896-2,2s0.896,2,2,2h20.75c1.104,0,2-0.896,2-2S23.855,18.875,22.75,18.875z"></path>
</g>
</svg>
          <span class="icon__fallback-text">Menu</span>
        </button>

  Add this css at the bottom of following path
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.site-header__navigation svg {
    width: 20px;
    height: 30px;
    position: relative;
    top: 10px;
}

Hope this is work for you.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0

@oscprofessional Amazing thank you so much for your help. As a small visual tweak any idea why there is a black border when the menu is selected

gregdale_0-1595237511817.png

 

0 Likes
Highlighted

Hello @gregdale 

Thanks for your reply!

For removing black border when the menu is selected

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

button.site-header__navigation:-moz-focusring {
	outline: none !important;
}

And one more thing you change in hedder.liquid file for remoing unwanted '>' for refrence please refer attached screenshot.

menu_XtraProtect.jpg

Hope this will work for you

Thanks....

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0

Thank you again really appreciate the help

0 Likes