This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

messy navigation menu, disappears

  • Creator
    Topic
  • #6633
    ifeddema
    Member

    Hi Jason,
    Love Swagger! Developing a site for a client and have noticed the navigation menu isn’t responding as it should. As I narrow the browser window, the menu items stack but nearly on top of one another, not showing the padding as in the demo version. As I narrow the window even further, the menu disappears, it does not do a vertical stack as it does in the demo. I’m working in a child theme and have done minimal customizing in the Custom CSS window — I have a full image in the brand header, flush right (rather than logo, flush left, and am not showing the social media items) which scales just fine per the window size, and I decreased the menu width padding from 22px to 18px to accommodate the menu items in one row (in a full size browser window). The navigation menu is non-existent on my mobile. I have the theme configured > Responsiveness > Tablets and Mobile Devices to Yes, apply special styles and > Mobile Navigation to Display simple menu text. What have I done wrong?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #6640
    Jason Bobich
    Keymaster

    Hello,

    Please provide a link to the issue.

    #6643
    ifeddema
    Member

    Hello,
    http://www.switzer-carty.com/sandbox/
    I suspect it’s the brand header image. If I made it half-3/4 the size, left it as flush left, would that clear it up?
    Thanks for your time.

    #6651
    Jason Bobich
    Keymaster

    As I narrow the browser window, the menu items stack but nearly on top of one another, not showing the padding as in the demo version.

    This is because in your Custom CSS, you’ve removed the top/bottom padding for menu items with this part:

    #access li a {
    	padding: 0 18px;
    }

    See /assets/css/responsive.css for how the theme targets this CSS for the tablet and mobile viewports.

    As I narrow the window even further, the menu disappears, it does not do a vertical stack as it does in the demo.

    Go to Appearance > Theme Options > Configuration > Responsiveness > Mobile Navigation and select the graphic menu option.

    I think what happened is that you changed this option to “simple select menu” (which is not what you want anyway) and then in some edit you made to the header, you inadvertently removed the simple select menu that’s supposed to show. —

    But either way that’s not the option you want anyway; so just change the theme option to be the theme’s default option like you see in the live demo, which is the graphic menu. However, I think you’re still going to have issue with that first CSS edit I pointed out previously.

    #6654
    ifeddema
    Member

    Thanks very much Jason,
    I’ll fix my CSS and switch up the mobile option.
    All the best, Irene

    #6655
    Jason Bobich
    Keymaster

    I see now you’re just trying to get all the menu items to fit in your navigation when viewed on the Desktop. Try applying your change something like this:

    /* All viewports */
    #access li a {
    	padding: 0 18px;
    }
    /* Tablets and below */
    @media (max-width: 800px) {
    	#access li a { padding: 12px 12px; }
    }
    #6657
    ifeddema
    Member

    Done! Perfect, thanks again, Irene

Viewing 6 replies - 1 through 6 (of 6 total)
  • The forum ‘Swagger Responsive WordPress Theme’ is closed to new topics and replies.