Dropdown Menu Adding Horizontal Space

  • I have a custom menu situated in the upper right of my site that has three primary links. The fourth is a dropdown that includes the rest of the site links. This fourth link is causing overflow issues and adding empty width to the site pushing it out horizontally. How can I prevent this?

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

  • Hi there!

    Can you post a link to your site so that we might come up with a solution for you?

    Cheers,

    Luke the Daft Duke

    Thread Starter hlcs23

    (@hlcs23)

    Sure thing, and thanks for the quick response.

    https://hlcs23.com

    I see the problem…

    You could reduce the left position of the drop-down menu to remove the overflow issue.

    .fixed-header #header-right .widget ul.menu ul ul, #header-right .widget ul.menu ul ul {
  left: 15px;
}

    Which would make it look like this:

    Screenshot

    If that seems to tight then you could shift the entire header left until you achieve the balance of design you want.

    Like this: Screenshot

    #header-right {
  margin-right: 100px;
}

.fixed-header #header-right .widget ul.menu ul ul, #header-right .widget ul.menu ul ul {
  left: 80px;
}

    To use this code you will either have to create a child theme or use a plugin such as Simple Custom CSS.

    I hope that helps!

    Luke the Daft Duke

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Dropdown Menu Adding Horizontal Space’ is closed to new replies.