Creating a fixed navigation bar-

New Member
1 0 1

Hello, 

Im using the Brooklyn theme, but I'm custimizing it a lot, 

The customer I'm making the site for would like a fixed nav element that stays at the top of the page, even if you scroll down, kind of like in this cite http://kutoa.com/, where the nav element is in plain view even when scrolling.

I know Ill need to access the <header> tags, but I was wondering if you more experinced designers have any advice on this?

Thanks much

1 Like
Shopify Partner
13 0 0

I don't know anything about your theme, but you should be able to do this just by editing your theme's css file in the assets folder. You can probably just write

header{
position:fixed;
}

or something, without actually having to change the template. If you also want to change the styling on scroll, this will be a bit more tricky, perhaps using a jquery plugin like scrollspy?

0 Likes
Excursionist
20 0 4

It is working but very buggy [ going left and not staying center and has no bacgkround]

can you help fix it please :)

0 Likes
New Member
1 0 1

@Cameron Jennings I noticed you managed to fix the header making it stick to the top of your pages and switch to a white background upon scroll down.

Can you share how you did it please?

Thank you in advance,
Paolo

1 Like
Excursionist
20 0 4

Yes , and how did you do that when you hover you mouse on the top menu it looks like a link and changes color plus adds "U"?

thx

0 Likes
Tourist
5 0 3

Hey Cameron. Could you please let us know your solution for this? Your site looks great and I think a lot of us are looking for the same solution with no luck.

Just to let you know, this forum shows up as the number one result on google looking for this solution. There is nowhere else that has an accurate and proper solution for this problem, so your input would greatly help everyone here.

Thank you!

0 Likes
New Member
2 0 2

I know this post is old, but here is how I revised my style sheet for a fixed header, as follows:

1) Edit timber.scss.liquid

2) Search for .wrapper class

3) Add a new class named: .header-wrapper below the .wrapper class. Note: the html inlcludes the .header-wrapper class already, but a it does not exist in the style sheet, so you'll need to add it for this fix to work. 

4) Include the following attributes, so your class looks like:

.header-wrapper {
  position: fixed;
  z-index: 1;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
}

The breakdown:

1) position-fixed keeps the header at the top of the page

2) z-index resets the stack order so all other elements float beneath

3) background-color: #fff returns the white background

4) width: 100% stretches the header from far left to far right

5) margin: 0 auto re-centers the logo and site links 

 

Hope this helps. Please reach out if you have any questions. 

Cheers!

2 Likes
New Member
1 0 0

HI Franco,

Im a newbie here so bear with my question, where exactly to put this code under the wrapper class below? This is from line 299-308

.wrapper {
  @include clearfix();
  max-width: $siteWidth;
  margin: 0 auto;
  padding: 0 ($gridGutter / 2);

  @include at-query ($min, $small) {
    padding: 0 $gridGutter;
  }
}

 

Thank you :)

0 Likes
New Member
3 0 0

hi Franco Jaramillo,

Almost there.. still don't understand:(

When if you have time, could you write something copy-pastable, and searchable for where to insert them?

A lit help from this post https://docs.shopify.com/manual/more/official-shopify-themes/brooklyn#move-logo-and-navigation-above... (but by removing

{% assign hero_full_height = true %}

 it breaks heroslide, doesn't look good on mobile and position not fixed). 

0 Likes
New Member
1 0 0

hi, I am havingt he same problem too and could ot figure out where to post this code. Minimal theme.

https://www.artemisiacollections.com/

Thanks, Pelin

0 Likes