Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Mobile Menu Alignment

Home Forums Support [Resolved] Mobile Menu Alignment

Home Forums Support Mobile Menu Alignment

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #260379
    Sigve

    Hey!

    Is it possible to place the mobile “menu button” on the right side of the site title without adding a Mobile Logo?

    Right now with Mobile Header Disabled and no Logo it looks very awkward as you can see on my site: https://webec.no

    I can make it work by Enabling the Mobile Header and adding a image logo, like i have done here: http://i.imgur.com/xMO986d.png

    Is it possible to do this without adding a logo image or enabling mobile header? My site title uses different CSS color styles on different pages, so a static image is not optimal for me :/

    Thanks,

    Sigve

    #260447
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Love the particles effect πŸ™‚

    This CSS might help:

    @media(max-width: 768px) {
        #site-navigation {
            clear: none;
            background: transparent;
            z-index: 500;
            position: relative;
        }
    
        .site-branding {
            display: block;
            float: left !important;
        }
    
        .site-logo {
            float: left !important;
            clear: none !important;
            max-width: 70%;
        }
    
        button.menu-toggle {
            width: auto;
            float: right;
        }
    }

    Let me know πŸ™‚

    #260521
    Sigve

    Hey,

    That worked great, i just had to add this to make it line properly with the site logo:

    .menu-toggle {
        	line-height: 3.5em;
    }

    But after adding the css code i am not able to press the site logo to be redirected to the frontpage, any clue why? It works without the css code.

    Thanks alot!

    #260619
    Tom
    Lead Developer
    Lead Developer

    particles.js can cause some z-index issues.

    You can fix this by raising the z-index of your site title:

    .site-branding {
        position: relative;
        z-index: 1000;
    }

    Glad I could help πŸ™‚

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