Hovering Navigation Menu Code

Tourist
29 0 1
Ive seen a few people ask for help for a fixed navigation menu. Below is the code I used. This is a code for floating navigation menu
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 I played around with the code to centralize the navigation menu.

.site-nav{ position: fixed !important; top: 140px !important; right: 200px !important; z-index: 1 !important; } #PageContainer{ margin-top: 75px !important; }
0 Likes

Hello 
Please share your site url.

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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Tourist
29 0 1
Quintessencessentials.com password is Love
0 Likes
Trailblazer
548 134 176

Hi, @elizsia ,

This is Evita from On The Map.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

@media screen and (min-width: 700px) {
.site-header {
position: fixed;
z-index: 1000;
background: black;
width: 100%;
padding-bottom: 8rem;
top: 0px;
}
.main-content {
margin-top: 14rem!important;
}
}

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
29 0 1
Thanks I will take a look soon
1 Like
Tourist
29 0 1

Ive had a play around with the code for about 2 hours

 

See below 

 

@media screen and (min-width: 500px) {
   .header-bar {
     position: fixed;
     z-index: 1000;
     background: #4267B2;
     width: 100%;
     padding-bottom: 0.5rem;
     top: -2.5px;
   } 
   .main-content {
     margin-top: 25rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-header {
     position: left;
     z-index: 1000;
     background: black;
     width: 100%;
     padding-top: 5rem;
     top: 0px;
   } 
   .main-content {
     margin-top: 5rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-nav {
     position: fixed;
     z-index: 1000;
     background: black;
     width: 100%;
     padding-bottom: -10rem;
     top: 15px;
   } 
   .main-content {
     margin-top: 0rem!important;
   }
}

 

Address https://quintessencessentials.com

0 Likes
Trailblazer
548 134 176

Good Job!

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Highlighted
New Member
4 0 0

How would i get my categories/menu bar to float down with my header?  Any ideas??

https://promo-supplies.myshopify.com/

0 Likes
Tourist
29 0 1

@ashleypromof wrote:

How would i get my categories/menu bar to float down with my header?  Any ideas??

https://promo-supplies.myshopify.com/


@media screen and (min-width: 500px) {
   .header-bar {
     position: fixed;
     z-index: 1000;
     background: #4267B2;
     width: 100%;
     padding-bottom: 0.5rem;
     top: -2.5px;
   } 
   .main-content {
     margin-top: 25rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-header {
     position: fixed;
     z-index: 1000;
     background: black;
     width: 100%;
     padding-top: 5rem;
     top: 0px;
   } 
   .main-content {
     margin-top: 5rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-nav {
     position: fixed;
     z-index: 100;
     background: black;
     width: 100%;
     padding-bottom: -10rem;
     top: 15px;
   } 
   .main-content {
     margin-top: 0rem!important;
   }
}
0 Likes
New Member
4 0 0

Thank you so much.  Where do i put this? at the bottom of which one?  Sorry im not very good at coding.

0 Likes