Menu Buttons Bunching Up Instead of Going Edge-to-Edge

  • TeqToo

    (@teqtoo)


    8 years, 9 months ago

    Hello, I am creating my new site on WordPress, and I’m pretty new to it. I’m using a child of the Twenty-eleven theme, and I’m running into a strange sticking point: the menu buttons are not spreading out across the full width of the body when displayed in a larger screen. Certainly, I expect them to bunch up when viewed on a mobile device, but on a larger display I expected it would stretch out. Any suggestions on what’s going on here? Any help would be very much appreciated. Thanks!

    http://atlanticliners.com.50-22-24-130.servelink.com/atlanticnavigator/

Viewing 3 replies - 1 through 3 (of 3 total)
  • CrouchingBruin

    (@crouchingbruin)

    8 years, 9 months ago

    It looks like you’ve made some changes to the parent theme’s style.css file? This rule in your parent theme’s style.css file is adding a lot of empty space to the right of your menu:

    #branding .only-search + #access div {
   padding-right: 205px;
}

    You shouldn’t be making any changes to the parent theme’s style.css file. Make them, instead, to your child theme’s style.css file.

    Thread Starter TeqToo

    (@teqtoo)

    8 years, 9 months ago

    Yes, you’re right, it was in there. I have no idea how it got in there, but it did. There were a lot of other entries about the search box, which I’m not really displaying in this site, but I hadn’t added that to the site. Not that I was aware of, at least.

    I’ve reset the “padding-right: 0px;” in the child theme to fix that, and the menu bar seems to be extending further to the right now, so it would appear to be working just fine. Thank you for your help!

    Thread Starter TeqToo

    (@teqtoo)

    8 years, 9 months ago

    I just went back and checked the style.css file within the twenty-eleven theme folder that came in the original WordPress 4.2.2 download, and that bit of code is in there – so it wasn’t a change I made to the file (whew, I thought I’d lost my marbles!) but it was the troublesome bit, so placing this bit of code in my editor did resolve it. 

    #branding .only-search + #access div {
   padding-right: 0px;
}

    I’ve used this theme for a couple of other websites, and never noticed the issue before because the small number of top level menu items didn’t trigger this odd behavior.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Menu Buttons Bunching Up Instead of Going Edge-to-Edge’ is closed to new replies.