[Resolved] mobile menu display bottom with larger nav size

[Leo]

Are you seeing the same thing as my screenshots above?

I’m trying to figure out why the two pages are different. The contact page has no header and the secondary navigation is working which is the end result we are trying to achieve right?

[Howard]

Yes I deactivated contact page form but both desktop and mobile have primary nav home and contact there .
Secondary has mobile and desktop nav with one you tube icon from snippets activated for font awesome 5
Also
Simple css activated with
.site-header {
display: none;
}

.inside-footer-widgets { text-align: center;.
Don not display site header code
.site-header {
display: none;
}

[Leo]

What do you mean by “I deactivated contact page form”?

So let’s take it another way, what’s not working correctly on the Contact page?

Also why is the home page showing nothing fount? Since it’s assigned to be the blog page, can you add a test post to make sure everything is working correctly?

[Howard]

Test Post there
Deactivated contact form

https://www.thesoundadvocate.com

[Leo]

Ok so this is what I see on the Home page now:
https://www.screencast.com/t/N31y8Qb9

Looks like everything is working?

[Howard]

Well we still have the mobile problem:
I am going to make this a bit easier for us
What needs to be done on mobile:
https://www.rawassertions.com
Also
Can I use footer old fontawsome and header new fontawsome together or should I make them the newer one I put in secondary menu snippets?

[Howard]

Does this have anything to do with it as its saved on my other site??

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

[Leo]

Yes the rawassertion site is using this method here:
https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

[Howard]

I just installed those codes… mobile secondary menu still stays below after hitting primary; take a look now!
Howard
https://www.thesoundadvocate.com

Maybe something with fontawsome 5??

[Howard]

Checking my simple CSS —- is this correct?

.site-header {
display: none;
}

.inside-footer-widgets { text-align: center;.
Don not display site header code
.site-header {
display: none;
}

.secondary-navigation .menu-toggle {
display: none;
}

@media(max-width: 768px) {
.secondary-navigation {
text-align: center !important;
}
.secondary-navigation ul {
display: block;
}
.secondary-navigation .sf-menu>li {
float: none;
display: inline-block !important;
}

[Leo]

Looks like this block has some problems:

.inside-footer-widgets { text-align: center;.
Don not display site header code
.site-header {
display: none;
}

– It’s missing a closing bracket and an extra . after text-align: center;.

– Then some texts that aren’t CSS

– Then a duplicated code that’s the same as the first block of code.

You can always run it through this site as well to check any syntax errors:
https://jigsaw.w3.org/css-validator/

[Howard]

Will check… which text arnt CSS?
Which is the duplicated code?
This will make it much easier for me
Thanks

[Leo]

“Don not display site header code” isn’t CSS.

And this is the same as the first block of code:

.site-header {
display: none;
}

[Leo]

Try this as your final CSS:

.site-header {
    display: none;
}

.inside-footer-widgets { 
    text-align: center;
}
.secondary-navigation .menu-toggle {
    display: none;
}
@media(max-width: 768px) {
    .secondary-navigation {
        text-align: center !important;
    }
    .secondary-navigation ul {
        display: block;
    }
    .secondary-navigation .sf-menu>li {
        float: none;
        display: inline-block !important;
    }
}

You can compare the two to see where the differences are.

[Howard]

Hi Leo
Inserted “exact” codes as above,,,,then deactivated — and reactivated SNIPPET BELOW: (fontawsome 5 also in 2nd snippets with CDN code from GP documentation)

add_action( ‘wp_enqueue_scripts’, ‘generate_dequeue_secondary_nav_mobile’, 999 );
function generate_dequeue_secondary_nav_mobile() {
wp_dequeue_style( ‘generate-secondary-nav-mobile’ );
}
Still the same??????
Howard

ps fontawsome snippet

add_action( ‘wp_enqueue_scripts’, ‘tu_load_font_awesome’ );
/**
* Enqueue Font Awesome.
*/
function tu_load_font_awesome() {
wp_enqueue_style( ‘font-awesome’, ‘//use.fontawesome.com/releases/v5.1.0/css/all.css’, array(), ‘5.1.0’ );
}
only plugins activated currently are: GP premium,,code snippets, simple css and wp contact lite
Is the fontawsome code correct? I use the old fontawsome for the widget on bottom footer 4.7

[Author]

Posts