Narrative Theme: How to add a button to the menu bar

Tourist
14 0 3

I love the clean look of the narrative theme. However, I found one issue. I would really like to have a clear shop button in the menu bar, anywhere, for instance next to the card icon. I have tried manual coding and using some menu apps.

Has anyone seem the same need? How did you solve it?

thanks in advance, 

 

Digital wellness with a human soul
0 Likes
Shopify Partner
1838 173 601

Hi Juan Sanchez

Did you try looking in to the theme's code, specifically Sections / header.liquid? Open it up and scroll down to line 217 or so. There is an anchor element linking to /cart that's nested in a div. You could add another anchor element linking to /collections/all and styling as a pill button to suite your needs.

Hope that helps!

I turn coffee in to code - since 1998
0 Likes
Tourist
14 0 3

Hi Karl, 

It did help, however, since I have the cart Icon too, it looks a bit out of the way. How could I put both elements (cart and shop now button) in the same line? 

See how it look now www.bagby.co 

Thanks in advance, 

Digital wellness with a human soul
0 Likes
Tourist
14 0 3

I karl I manage to do it but now the text in the slider is too close to the header. Any advice?

Thanks

Digital wellness with a human soul
0 Likes
Shopify Partner
1838 173 601

Hi Juan Sanchez

  1. The obvious: shorter text :-D
  2. Check theme settings whether you can change the slider's font size
  3. Use flexbox on .slideshow__text-container with polyfill for IE10 and Safari instead of the absolute position centering technique
  4. Use em font-size paired with JS to scale the font as an offset of the container element's offsetHeight property

Hope that helps!

I turn coffee in to code - since 1998
0 Likes
New Member
1 0 0

Hey Karl, I've got a question.

 

We've spent weeks adding and getting all of our apps working smoothly on the Narrative theme.

 

Now we are questioning if we need a different menu style to replace the sandwich style.

 

Customers seems to over look and it and we are afraid we could miss some sales.

 

So in your experience is the sandwich menu a good option? If not, could we drop some code in and replace it with a different one?

 

https://www.invadercoffee.com/

0 Likes
New Member
1 0 0

Hi Karl, 

I am having the same issue; however, when I typed in the code for the new anchor it came out odd and not at all how Juan's did. 

Could you please help me with correcting my code so it comes out inline with cart button. 

This is what I had used and it did not work. 

<a href="{{routes.collections_all}}" class="btn btn--clear btn--square btn--hover-scale site-header_collections/all_toggle" aria-expanded="false">
{%- assign icon = 'icon-header-' | append: section.settings.icon %}
{% include icon %}
<span class="icon_fallback-text">{{'general.header.view_collections_all'| t }}</span>
<span class="site-header_collections-bubble"</span>

Screen Shot 2019-11-26 at 4.23.54 PM.pngThank you!

0 Likes