[Support request] How can I change the menu bar sticky navigation background color?

[David]

Do you mean the Sticky Logo ? If so in Customizer > Layout > Sticky Navigation you can adjust the Menu Item Height and the logo will increase to fit.

[Jonny]

Hello again, so i have managed to fix the logo size and background colour for the navigation, however the white background colour on the sticky nav does not seem to be working on mobile devices.

[Jonny]

and also on tablet devices, the size of the logo is much larger than it appears on desktop

[Ying]

Hi Jonny,

and also on tablet devices, the size of the logo is much larger than it appears on desktop

I just checked your site, on desktop the logo size is 250px * 48px, on tablet it’s 156px * 30px, so I don’t see the issue you are seeing.

however the white background colour on the sticky nav does not seem to be working on mobile devices.

As you are using mobile header on mobile, mobile header takes the navigation background color as its background color. Sop for the sticky mobile menu background color, try this CSS:

.header-wrap nav#mobile-header.navigation-stick {
    background-color: white;
}

[Jonny]

I added the CSS you provided and it did not solve the issue. I cleared cache on the site and cleared cache on mobile.

Some other issues I am experiencing are the ‘back to top’ arrow is only appearing on pages and not posts.

The search icon on mobile devices is unclickable, the search function/text cursor does not appear.

All links across my site have to be clicked on twice for it to work. How can this be fixed so a user only has to click on a link once?

Many thanks for your support.

[Ying]

I added the CSS you provided and it did not solve the issue. I cleared cache on the site and cleared cache on mobile.

I’m not seeing the CSS on your site, how did you add it?

Some other issues I am experiencing

Can you open a new topic for non-related questions? Thanks!

All links across my site have to be clicked on twice for it to work.

Does this open happen on mobile? Please also open a new topic.

[Jonny]

I added the CSS in two places, the additional CSS in customiser and also in the Simple CSS plugin and still not working on mobile devices.

[David]

Can you add back the CSS in either place. And clear any caches then let me know so i can take a closer look.

[Jonny]

No worries, I have added the CSS and cleared cache

[Ying]

I’m still not seeing the CSS.

Can you try disable your cache plugin for now?

[Jonny]

If I deactivate WP Rocket plug-in will I lose all current settings I have set up?

[David]

No – the settings are saved so you can de-activate without losing them.

[Jonny]

Ok, thanks for the confirmation. And let’s say I deactivate the plug-in and the nav-bar starts to appear the way I want it with the added CSS, what’s next? Am I able to activate the WP rocket plug-in again?

Also, I noticed the sticky nav on mobile works on posts that I have published using the block editor but does not work on posts published with the classic editor.

I have included the URL link to a post published with block editor (Lipsi Island) and a post that is published with classic editor (Bali itinerary)

[David]

The first thing to do is to disable the plugin, then clear any browser caches, and if possible test the site on different network ( to eliminate any ISP/Router caches ). If the site operates and looks correct, then we know its related to the WP Rocket optimizations.

If thats the case, then its about eliminating which setting in WP Rocket is causing the problems. That is a process of elimination by disabling each setting OR asking WP Rocket for some advice on what their plugin is doing.

[Author]

Posts