Impulse split navigation

New Member
9 0 0

Hi all. I am using the Impulse theme. We are using a split navigation and would like to customize the theme so that the left hand side nav is pushed out to the left and the right hand side nav is pushed out to the right - so that they are moved away from the central logo. I've tried increasing the padding around the logo but this pushes each nav onto 2 lines and there's still plenty of space in the header to push the navs out to the side. The theme developers have been very helpful but the code they're suggesting doesn't work.... Thanks in advance! 

0 Likes

Hello 

Add this css at the bottom of your css file:

.header-item--split-left {
    justify-content: left!important;
}
.header-item--split-right {
    justify-content: flex-end!important;
}

  

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
9 0 0

Hi - thank you very much for this code. I've tried this already as advised by the theme creators and this doesn't work. Any other ideas? 

0 Likes

@BerryS,

Can you please share site url so that I will give you exact solution

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Expert
2657 61 651

Hi @BerryS  

here is a couple of ideas I'd try based on the demo shop of the theme.

1) Theme limits the navigation bar width to 1500 pixels, so you may try increasing this like so:

.site-header .page-width, 
.toolbar .page-width {
    max-width: 1650px;
}

2) even if there is a free space on the nav line, the logo would not grow since there is a rule inside the header-logo-block snippet, which prevents logo wrapper from growing over the width specified:

@media only screen and (min-width: 769px) {
      .header-item--logo,
      .header-layout--left-center .header-item--logo,
      .header-layout--left-center .header-item--icons {
        -webkit-box-flex: 0 0 {{ block.settings.desktop_logo_width }}px;
        -ms-flex: 0 0 {{ block.settings.desktop_logo_width }}px;
        flex: 0 0 {{ block.settings.desktop_logo_width }}px;
      }
    }

I would try to change the underlined line to be:

    flex: 1 0 {{ block.settings.desktop_logo_width }}px;

This will allow the logo wrapper to grow, effectively pushing menus to the sides.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
9 0 0
Hi - the site is macraeskye.myshopify.com but it isn’t live at the moment.
There’s a landing page that’s live for now....
0 Likes
New Member
9 0 0
Thank you! I’ll try this and will let you know how I get on
0 Likes
New Member
9 0 0

Thanks for your help with this. I'm not seeing the code that you've suggested in > assets >theme.scss.liquid - would it be somewhere else? 

 

0 Likes
Shopify Expert
2657 61 651

First code should be added, not edited.

By default, theme uses this code to set maximum width of the .page-width elements:

$page-width: 1500px;
....
.page-width { max-width: $page-width; margin: 0 auto; }

My suggestion is to override this rule for menu bar only.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes