[Resolved] mobile menu icon display error

[dasigna]

strange phenomenon when viewing website in mobile view – the mobile menu icon has a red line above …

no clue where this is coming from. even the red color is not used anywhere. the css gives no hint at all.
completely running out of ideas.

maybe this has happened somewhere before??

[David]

Hi there,

it is the background image that has been added to the navigation and toggle with this CSS:

.main-navigation, .menu-toggle {
    background-image: url('https://b95qpec.myraidbox.de/wp-content/uploads/2019/08/lackierzentrum-vs-farbspektrum.png');
    background-repeat: no-repeat;
}

If you target just the .main-navigation then it should fix the issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[dasigna]

hi david,
this is kind of funny 🙂
you are somewhat pointing into the obviously right direction, but not exactly nailing it.
this css is not a part of custom css! the bg image is applied via customizer and the css you are pointing at is inline css from gp… ??

so one way to solve this would be:
apply the bg image completely via custom css – which works.
but then unfortunately the misaligning of the two icons (search and hambuger) persists…
(this is the status at the moment)

so what has to be done to keep the image within customizer without gp applying it to .menu-toggle??
and keep the icons aligned?

menu tweaks are always kinda hard thing to do in gp … at least for me 😉

thanks for efforts again.

[David]

Can you flush and disable your cache so i can see what is effecting the alignment, the background image should not affect this.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[dasigna]

theres no caching going on currently.

[dasigna]

… i’m on track (?):
the misalignment might have to to with the resizing of the logo, but not getting behind it now as it appears only on mobile not on desktop …

remaining question:
why does gp apply the .menu-toggle class when adding a background image to main navigation???

[David]

So as the background applies to the default navigation menu on mobile

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[dasigna]

So as the background applies to the default navigation menu on mobile

sorry, cant follow 🙂

anyway – the search-icon is still not aligning vertically (non-sticky only)
any way to solve this?

[David]

If you have a standard site header and navigation (ie. not the Navigation as header then on Mobile the Primary Navigation sits below the header. The .menu-toggle is required so as the navigation on mobile also gets the background.

It may be something we’ll take a look at for when using Navigation as Header but it hasn’t come up as an issue before.

Try this CSS to align the icons:

@media (max-width: 960px) {
    .main-navigation:not(.slideout-navigation) .inside-navigation {
        align-items: center;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[dasigna]

unfortunately your code didnt work.

… did’nt i mention i’m using the navigation as header?? sorry if i should have done – in fact thats the case 🙂

[Tom]

It looks good on my end with that CSS – maybe your browser has it cached?

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[dasigna]

hi guys,

hmmm – thats VERY strange! tried back and forth yesterday with that code and other – nothing worked… today i have to admit that it does. perfectly.
no caching was going on, as i’m testing such sniplets mostly direct in browser at first and then simply left it within custom css to keep it… i think i have to test out what went wrong that jangles my nerves from time to time!

so this seems to be resolved.
again learned something new about navigation, working well, great and patient support as always 🙂

thanks guys.

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts