-
How can I create such a header like this?
Please see the arrowed header in this screenshot
-
Hi there,
try the following:
1. in Appearance > GenratePress activate the Menu Plus module
2. in Customiser > Layout > Primary Navigation set the Navigation Width to Contained.
3. in Customiser > Layout > Header , check the display Navigation as Header option.
4. in Customiser > Layout > Sticky Navigation, activate the sticky option without any transition.
5. Add this CSS to the site:.main-navigation { border-radius: 50px; position: relative; top: 20px !important; } -
Thanks, David!
It works like a charm.
However, how can we add margin to the left and right on tablets and mobile?
Currently, the menu touches the left and right edges of the screen on tablets and mobile phones. Please see the screenshot here.
-
Hi there,
Could provide the site URL so we can inspect the menu?
-
Hi Alvind,
It’s still under construction, so it’s placed under an “Under Construction” page. So, you can’t see it. Is there another way to go about it?
-
You can try this CSS to see if it works:
@media (max-width: 768px) { .main-navigation { margin-left: 20px; margin-right: 20px; } } -
Hi Alvind,
It works! Thank you so much!
-
Glad to hear that! 😁
-
Hi,
Now that the navigation header top is 30px from the top, there’s a white space before the page’s first (hero) section. How do I remove the white space?
Please see here and all its inner pages too see what I mean
-
Change your CSS to:
.main-navigation { border-radius: 50px; position: relative; top: 30px !important; max-width: 1000px; margin-top: -30px; } -
Hi Ying,
Thanks for the prompt response. However, after doing what you’ve suggested, the menu gets flushed to the top instead, and the white space is still there. Please refresh the browser to see what I mean.
-
Hi there,
Remove the
margin-top: -30px;property from this CSS, then try adding this instead:div.gb-container.fs-fade-in { margin-top: -80px; } -
Hi Alvind
It only works on the home page, not the rest of the pages, and the mobile version doesn’t work on all pages.
-
I use the CSS below to solve the white space issue—however, the navigation bar now aligns to the left instead of sticking to the centre.
.main-navigation {
border-radius: 60px;
position: fixed;
max-width: 1000px;
padding: 5px 0px;
margin: 30px auto!important;
}Did I miss something?
-
Hi Alvind,
I’m sorry. It actually became worse. So, I changed back to the following CSS and the problem of the extra space is still there.
.main-navigation {
border-radius: 50px;
position: relative;
top: 30px !important;
max-width: 900px;
}div.gb-container.fs-fade-in {
margin-top: -80px;
} -
Hi,
I’m sorry to be shooting you so many posts. 😅
I use this, and it works!
div.grid-container {
margin-top: -80px;
}Is this correct?
- You must be logged in to reply to this topic.