Secondary menu and footer style issue at mobile breakpoint

Hi there,

is your Child Theme still active ?

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

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%;
}
}

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

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.

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

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

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

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.

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

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