responsive menu creating gap in small screen display

Home Pootlepress Academy Support Forums Academy Support Forum WordPress menus responsive menu creating gap in small screen display

This topic contains 2 replies, has 2 voices, and was last updated by responsive menu creating gap in small screen display 1 Jamie Marsland 5 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #15728
    responsive menu creating gap in small screen display 2
    Shelly
    Member

    I have usd the CSS from the tips to center the main navigation. Now, when you visit the site on a smartphone, there is a huge gap between the header and content, and the navigation block is visible at the left edge of the screen- how can I fix this?

    #15729
    responsive menu creating gap in small screen display 2
    Shelly
    Member

    Here is the css that I have used in the child theme-

    #navigation {
    position: relative;
    }

    #main-nav {
    clear: left;

    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    text-align: center;
    }

    .nav li {
    display: block;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
    }

    .nav li.hover, .nav li.hover {
    position: relative;
    }

    .nav li ul li {
    left: 0;
    }

    #navigation #nav-container element.style {
    clear: none;
    float: none;
    margin-bottom: 0;
    width: auto;
    }

    #15733
    responsive menu creating gap in small screen display 4
    Jamie Marsland
    Keymaster

    Hi Shelly,

    Have you seen our Canvas Extension that does this?

    http://jamiemarsland.wpengine.com/shop/center-logo-menus-woothemes-canvas/

    Jamie

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

Scroll to Top