Archived topic

Mobile Menu Alignment

3 replies · Started by Sigve on January 3, 2017

Viewing posts 1–4 of 4

January 3, 2017 at 3:20 pm #260379

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

January 3, 2017 at 7:43 pm #260447

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 :)

January 4, 2017 at 4:11 am #260521

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!

January 4, 2017 at 9:23 am #260619

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 :)

This archived topic is closed to new replies.

Start building better websites today.