Archived topic

Mobile Slide Out Navigation Alignment and Colour issues

5 replies · Started by Jefri on August 18, 2017

Viewing posts 1–6 of 6

August 18, 2017 at 10:02 pm #369096

Hi All,
I have been using GP Premium and love it.

Have an issue with mobile slide out navigation.

I am using this CSS, so I can change the colour of my background of my Sticky Navigation:

@media (max-width: 768px) {
.main-navigation {
background-color: #000000;
}
.main-navigation .main-nav ul li a {
line-height: 40px;
}
}

I have two questions:
1) If you look at the site on mobile: http://majedesigns.com.au/home
The hamburger icon is aligned to the right, how can I align it to the middle?

2) When the slide out navigation comes out, it takes up 75% of the screen with useless blank space (of my background colour). Can I control the padding on this slide out navigation?

Thank you!

August 18, 2017 at 11:27 pm #369126

Hi there,

1. Give this a shot:

.menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
    width: 100%;
    float: none;
}

2. You can adjust the width of the slide-out menu like this:

#generate-slideout-menu {
    width: 270px;
}

August 19, 2017 at 3:11 am #369186

Thanks Tom. It worked.

Can you please also tell me how to centre align my logo in primary navigation ONLY on Mobile? Thanks.

August 19, 2017 at 10:55 am #369412

This should do it:

@media (max-width: 768px) {
    .site-logo.sticky-logo.navigation-logo {
        display: block;
        float: none;
        text-align: center;
    }
    .main-navigation .navigation-logo img {
        display: inline;
    }
}

August 19, 2017 at 7:06 pm #369595

Thanks Tom. It worked!

August 19, 2017 at 11:46 pm #369647

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.