[Resolved] Mobile Slide Out Navigation Alignment and Colour issues

Home Forums Support [Resolved] Mobile Slide Out Navigation Alignment and Colour issues

Home Forums Support Mobile Slide Out Navigation Alignment and Colour issues

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #369096
    Jefri

    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!

    #369126
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #369186
    Jefri

    Thanks Tom. It worked.

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

    #369412
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #369595
    Jefri

    Thanks Tom. It worked!

    #369647
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

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