- This topic has 13 replies, 3 voices, and was last updated 5 years, 5 months ago by
.
-
Posts
-
Hi there,
I am trying to design the navbar on my site . I enabled sticky navigation according to the document. However, I found that now there are two mobile headers.
1) On the first load, the header is the same as in desktop version only smaller with the navbar being in the hamburger.
2) when scrolled down, the “normal” header will be hidden and the sticky navigation will come up.What I would like is to have only the sticky navigation all the time without the desktop menu. I tried disabling the desktop menu using
display:nonebut it seems that the content are the same as the sticky navigation so i would be disabling both.Can you advice on how to get only the sticky navigation and also ways of styling the sticky navigation? I want the logo to be at the center instead of on the left.
Thanks!
Customer Support
Hi there,
the best way to do that is to enable Customizer > Layout > Mobile header and enable the sticky navigation for the that option.
Once you have that enabled i will help with centering the logo.
Hi there,
I have enabled that and as mentioned above both original nav and the sticky nav is to be seen. I only want the sticky nav.
Customer Support
I’m not seeing the mobile header option activated currently:
https://docs.generatepress.com/article/mobile-header/Hi,
Ah okay, it’s on now and the normal header isn’t there anymore. Can you now guide me how to style it? I want to place the logo in the middle and add color to it.
Thanks!
Give this CSS a shot:
@media (max-width: 768px) { #mobile-header.mobile-header-navigation .site-logo.mobile-header-logo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin-left: 0 !important; } }Hi,
The position is changed but it’s slidely on the right side. Besides, I would also like to give it a background color of #F8F8F8.
Thanks!
Can you try the edited CSS?
https://generatepress.com/forums/topic/mobile-header-with-only-sticky-navigation/#post-1536637To change the color, try this:
#mobile-header { background-color: #f8f8f8; }Do you mean you edited the code you posted earlier? I have tried and it’s the same, you can visit the site to check.
Sorry I edited again maybe after replied to the topic initially.
Please try again:
https://generatepress.com/forums/topic/mobile-header-with-only-sticky-navigation/#post-1536637And make sure to see the
background-colorinfo here:
https://generatepress.com/forums/topic/mobile-header-with-only-sticky-navigation/#post-1537885It seems to work now, I have also added the color. I added
box-shadow: 0px 3px 6px #00000029;as well but it doesn’t seems to work, can you tell me why?Try this instead:
#mobile-header { background-color: #f8f8f8; box-shadow: 0px 3px 6px #00000029; position: relative; }it’s working! Thanks!
No problem 🙂
- You must be logged in to reply to this topic.
