- This topic has 11 replies, 2 voices, and was last updated 7 years, 12 months ago by
.
-
Posts
-
Hi there,
I have a centered menu and I want the size of the sticky menu to match my menu items and not have a big white space on both sides of the menu. I only see the option to have it contained or full size but not a specific width size or a size to match the size of the width of the menu items.
Thank you.
Lead Developer
Any chance you can link me to your site?
I updated the first post with the website address and the username and password are after that divided by a slash /
Played with this a bit – centering fixed items isn’t easy.
It’s possible, but it will break the “slide down” feature:
.main-navigation.navigation-stick:not(.gen-sidebar-nav) { width: auto !important; left: 50%; transform: translate(-50%, 0%) !important; }Thank you Tom,
I tried it and it doesn’t fit the menu tight, still white space on both sides. I didn’t thought would be a hard thing to do. And if is not possible I can understand it but in my opinion would be a good thing to add in a future release.
Which one is the “slide down” feature? I am using the code and don’t see any changes/errors so far.
Is it possible to apply this code only to the desktop view? how can I change the code to skip the mobile view?
Thank you.
The non-sticky menu is actually full width, but if we applied CSS to it to make it auto width, it would likely match the current sticky menu.
I wonder if it would be better to just remove the sticky nav shadow instead of the above CSS? That way it would be very hard to tell the difference between the sticky and non-sticky menu.
The slide down feature makes it so the menu slides down as it becomes sticky.
To make something happen on desktop only using CSS, put your CSS in this media query:
@media (min-width: 769px) { /* Your desktop CSS in here */ }“I wonder if it would be better to just remove the sticky nav shadow instead of the above CSS?”
Hi Tom, Thank you very much and you are probably right, how can I remove the shadow?
Try this:
.sticky-enabled .main-navigation.is_stuck { box-shadow: 0 0 0 transparent; }Hi Tom,
Thank you but for som reason the code didn’t work on my site. I wonder why?
Can you try the adjusted CSS above?: https://generatepress.com/forums/topic/sticky-menu-width-size/#post-542179
Perfect,
Thank you Tom!
You’re welcome 🙂
- You must be logged in to reply to this topic.
