[Resolved] mobile menu icon display error

Home Forums Support mobile menu icon display error

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #987706
    dasigna

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

    mobile icon

    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??

    #987777
    David
    Staff
    Customer Support

    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.

    #987797
    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.

    #987804
    David
    Staff
    Customer Support

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

    #987819
    dasigna

    theres no caching going on currently.

    #987827
    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???

    #987829
    David
    Staff
    Customer Support

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

    #987843
    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?

    #988147
    David
    Staff
    Customer Support

    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;
        }
    }
    #988164
    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 🙂

    #988524
    Tom
    Lead Developer
    Lead Developer

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

    Let us know 🙂

    #989122
    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.

    #989486
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.