Add a fixed/sticky navigation bar in Debut theme

Highlighted
Tourist
6 0 2

Hello,

I'd like to add a fixed/sticky navigation bar to the Debut theme. I've seen plenty of similar questions but none with code specific to the Debut theme.  Please let me know which file to modify and what code to add.

Also, if I want to customize the CSS of section padding and buttons etc where should this code be placed? I'm new to Shopify coding. Typically I'd create a child theme (WordPress) with just my additional CSS code so that theme updates would not overwrite my code.

Thank you!

Highlighted
Tourist
4 0 4

I want to do the same thing... 

So far, I have gotten the notification bar and navigation bar fixed, however the navigation is under the notification bar and goes under other elements when you scroll, plus the BG in the nav bar is transparent, I want it to be '$color-body' (which is currently white). 

To fix navigation bar: 

in theme.scss.liquid around line 3522 find: 

.site-header {
  background-color: $color-body;
  position: relative;
  padding: 0 $gutter-site;

change to: 

.site-header {
  background-color: $color-body;
  position: fixed;
  padding: 0 $gutter-site;

This 'fixes' the nav bar. 

To fix notification bar (if you have it enabled): 

in theme.scss.liquid find:

.notification-bar {
  text-align: center;
  position: relative;
  z-index: $z-index-notification-bar;
}

chang to

.notification-bar {
  text-align: center;
  position: fixed;
  width: 100%;
  z-index: $z-index-notification-bar;
}

Thats as far as I've gotten today. It is beer thirty now. I'll post updates if I can figure the rest out. It has been years since I've coded anything. Good luck. 

 

Do or do not, there is no try. - Yoda.
0 Likes
Highlighted
Tourist
6 0 2

I think I have this working. It seems you need CSS and JS for this to work correctly. Here's what I did.

I pasted the following code at the bottom of theme.scss.liquid

body {
  padding-top: 150px;
}
.site-header {
  height: 150px;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  margin-top: 0;
  width: 100%;
}
@include media-query($medium-up) {
  body {
    padding-top: 150px;
  }

    .site-header {
        height: 150px
    }
}

div#SearchDrawer {
    z-index: 101;
}


In theme.js, find function openMobilNav (line 952) and replace its first line 

var translateHeaderHeight = cache.$siteHeader.outerHeight() + cache.$siteHeader.offset().top;

with this: 

var translateHeaderHeight = cache.$siteHeader.css('position') =='fixed' ? 0:
      cache.$siteHeader.outerHeight() + cache.$siteHeader.offset().top;
 

0 Likes
Highlighted
Tourist
4 0 4

Ok got it done (thx to another post, help from a freind):

in theme.scss.liquid

to fix the header, go to the bottom and add: 

header.site-header {
    padding-top: 40px;
      position: fixed;
    z-index: 999999;
    background-color: #fff;
    
}

(Adjust padding and BG color to fit your site, by default the nav has a transparent BG and elements will show through when you scroll)

then to take care of the notification bar (if you have it enabled) find code below near line 3730ish in theme.scss.liquid and change position to fixed, add width 100% and change z-index to 1000000 like so:

.notification-bar {
  text-align: center;
  position: fixed;
  width: 100%;
   z-index: 1000000;
}

Finally to push the body of your site below the header you just fixed in theme.scss.liquid around line 1178 add margin-top: 100px like so:

.main-content {
  display: block;
  padding-top: $section-spacing-small;
  margin-top: 100px;

---- Hope this helps!! Good luck. If you need a good mattress let me know! ;)
www.zenbed-mattress.com

 

Do or do not, there is no try. - Yoda.
Highlighted
New Member
2 0 0

hi guys, 

 

i tried the following steps but the annoucement bar was below the header. and there was a white gap..

 

can someone provide the full steps to make the nav bar sticky. 

 

thanks 

0 Likes
Highlighted
New Member
15 0 0

Hi Kerry,

I'm trying to get my logo to the left on my header bar with search and shopping bag on the right as you have and menu/nav bar under all this...Is there any chance you could please advise me as to how you amended the code....Thank you in anticipation of help.

Regards,

 

Virginia

wickeddame.com

0 Likes
Highlighted
New Member
15 0 0

Hi,

I'm just wondering if you'd be kind enough to tell me (with code for my depleted brain) how you got your logo to the left and basket icon to the right....I've been trying and trying but ever time I upload my image it over rides the text of Wicked Dame and then the nav items start stacking up on each other....Be very grateful for your help....Thank you..Virginia

wickeddame.com

 

0 Likes
Highlighted
Tourist
6 0 2

Hi Virginia,

I'm not doing anything special to make the logo left aligned and the basket icon right aligned.  This is happening automatically with the Debut theme.  Is that the same theme you are using?  I can't view your site. If you're interested here's the only custom CSS I have in Assets > theme.scss.liquid that I've pasted at the bottom of that file:

/* Hide search */
.search-header {
    display: none;
}

h1, h2 {
    text-transform: uppercase;
}

0 Likes
Highlighted
New Member
2 0 0

In the newer versions of the theme, the notification bar is now called Announcement Bar.  So this is what my code looked like:

Line 3638

.announcement-bar {
  text-align: center;
  position: fixed;
  width: 100%;
  z-index: 1000000;
 
}

0 Likes
Highlighted
Tourist
9 0 2

I've implemented the code from this thread into my Debut theme and it solved some issues, however the announcement bar has moved from the very top of the screen, down below the main navigation menu bar and obscures the first entries in the dropdown list, making it un-clickable.

0 Likes