[Support request] Secondary menu and footer style issue at mobile breakpoint

[Keith Taylor]

Hi

Two strange things have happened on my site. I haven’t made any changes, except adding a few plugins. I’ve deactivated all of these (and all other plugins) to ensure they are not the cause of the problem.

1. On my secondary nav menu, above the mobile breakpoint of 1300px, everything behaves as it should: I have a “contact us” link, then a login button, then the search icon. When I go below the mobile breakpoint, the login button should remain, but it has been replaced by a second hamburger icon. I first noticed this a few days ago, and as I say I didn’t make any changes…

2. Also when I go below the mobile breakpoint of 1300px, the style of everything in the footer changes. It seems that it is now getting these styles from wp-content/uploads/generatepress/style.min.css rather than from my child theme style. Above the mobile breakpoint it takes the styles from my child theme as expected. Again I first noticed this a few days ago and didn’t change anything…

Can you help?

Many thanks!

[David]

Hi there,

is your Child Theme still active ?

[Keith Taylor]

Hi David – yes the child theme is still active. Above the mobile breakpoint it uses the child theme style.

[Ying]

For the navigation, try adding this CSS:

@media (max-width: 1300px) {
.main-navigation .second-nav  ul, .main-navigation:not(.slideout-navigation):not(.toggled) .second-nav  .main-nav>ul {
    display: flex !important;
}

button.menu-toggle.secondary-menu-toggle {
    display: none !important;
}
}

For the footer, I’m not seeing many style changes, only the link color changed from white to blue, it’s because your CSS is targeting a screen wider than 1300px:

@media (min-width: 1301px){
.footer-links a {
    color: #fff;
    font-size: 13px;
    opacity: 80%;
}
}

[Keith Taylor]

Thanks Ying for the reply.

The problem seems to be that, below 1300px (the breakpoint I’ve set for mobile), the child theme style.css is no longer loading.

So for both issues, having the child theme css load again would solve it. (Those styles for the footer are being applied from the parent theme css).

Any ideas why the child theme css would suddenly not be loading below the mobile breakpoint?

Thanks, Keith

[David]

Well i will be completely honest, but i am having trouble getting my head around that lol
Question, instead of hooking in the Secondary Navigation, as no drop down menus – why not just hook in the 2 links ?

This would remove a lot of the complexities of mobile nav breakpoints.

[Keith Taylor]

Hi David

Sorry, I realise the post was a bit all over the place!

To summarise and clarify:

1. I have set a mobile breakpoint of 1300px in the Customise settings of Generatepress:
Customising – Layout – Primary Navigation – Mobile Menu Breakpoint

2. I am using a child theme, which I set up according to the instructions at https://docs.generatepress.com/article/using-child-theme

3. Above the mobile breakpoint of 1300px, the child theme style.css loads on the page.

4. Below the mobile breakpoint of 1300px, the child theme style.css doesn’t load on the page. It was loading up until a couple of weeks ago, and I haven’t made any changes to the site, other than theme and plugin updates.

5. I have deactivated all plugins to check for conflicts, and the issue still occurs.

6. The child theme css no longer loading is causing style issues and double hamburger menus on mobile.

Can you help?

Many thanks, Keith

[David]

What other Styles go missing on the mobile ( 1300px ) screen size ?

[Keith Taylor]

All the styles that I have added to the child theme style.css, because the entire stylesheet doesn’t get loaded on the page…

[David]

Sorry if i a missing something, having a bit of brain fog today, but I tested on Chrome, Safari and Firefox in private browsersm no cache with the responsive breakpoint set to below 1300 ( tried actual phone sizes too ) before loading the site – all resulted in the child theme styles.css loading:

https://www.screencast.com/t/d7zPuM8N

Are you not seeing that at your end ?

For the Secondary nav issue – did you see what i proposed here ? As that would be a more effective method of doing that.

[Keith Taylor]

Hi David – I’m really sorry, you’re absolutely right, it is there. Just a small error in the code that caused all the issues. I’m really sorry to have wasted your time and thanks for your help.

Keith

[David]

No apologies necessary, sometimes that extra pair of eyes is all one needs! Glad to be of some help 🙂

[Author]

Posts