[Resolved] Mobile Menu Alignment

[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

[Tom]

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 🙂

[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!

[Tom]

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 🙂

[Author]

Posts