Adding Fixed Menu/Scrolling Menu to website in Debut theme - HELP!

Highlighted
Tourist
6 0 1

Hi, I'm trying to add a fixed/scrolling menu to my site: www.plantfuelled.co

I am using debute theme

0 Likes
Highlighted
Excursionist
19 3 5

1.Go to themes in left side bar of your admin dashboard
2.Than select dropdown and select (edit code) option 
3.Than Search for theme.scss.liquid file open it and in the end of file add this css and save it...


.site-header{
    position: fixed !important;
    top: 0px !important;
    z-index: 1 !important;
}

#PageContainer{
    margin-top: 75px !important;
}
 

1 Like
Highlighted
Tourist
6 0 1

Thanks maulikp, you hero!

1 Like
Highlighted
New Member
5 0 0

It works but for my mobile view my nav bar shrinked to the left a bit leaving some gap on the right

0 Likes
Highlighted
Tourist
29 0 1

This is new. I used the inspect fuction on google chrome and played around with the code.. The code below shows the Menu. The previous code showed the header including the logo of your site. with this new code there is no logo just the menu. Go to Themes, and Edit code. then Assets. Open 

theme scss liquid and paste the code at the very bottom. save and text it out

 

.site-nav {
position: right !important;
top: 140px !important;
z-index: 1 !important;
}

#PageContainer{
margin-left: 75px !important;
}

0 Likes
Highlighted
Tourist
29 0 1

This is new. I used the inspect fuction on google chrome and played around with the code.. The code below shows the Menu. The previous code at the showed the header including the logo of your site. with this new code there is no logo just the menu. Go to Themes, and Edit code. then Assets. Open 

theme scss liquid and paste the code at the very bottom. save and text it out

 

.site-nav{
position: fixed !important;
top: 140px !important;
right: 200px !important;
z-index: 1 !important;
}

#PageContainer{
margin-top: 75px !important;
}

0 Likes
Highlighted
New Member
1 0 0

Dear Shopify Tech,

I had created sticky Top Menu Bar but need CSS code to also sticky Announcement Bar on top of every page when I check box Announcement Bar.

Would be thankful if anyone could assist to provide CSS code to Make the Submenu scrollable vertically for my gift2uideas.myshopify Debut Theme so that when my submenu list get more it would not hide below my mobile screen view.

Here I saw a website which has the layout done as expected & wish I could do the same fixed The Debut theme Main Menu on top which I did but Submenu scrollable.

https://www.insead.edu/executive-education/online-programmes

Thank you in advance 

0 Likes