Sticky Menu Width Size

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 :)