Sub-Menu item spacing super bad

  • Resolved briggreene

    (@briggreene)


    6 years, 3 months ago

    Primary menu looks so bad…
    1) super right justified with no padding on right
    2) drop down items have way too much space between them
    3) drop down items shoot way out to left instead of being under the item they are actually under.

    I can’t seem to get the right CSS to customize.
    Anyone know?

    many thanks!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    Hi,

    As I found in your style.css #nav-primary has assigned float:right; So remove (or overwrite it using custom stylesheet) from your stylesheet else add below code in your additional CSS from customizer.

    #nav-primary {
  float: left;
}

    Then Remove right:0 from <ul class="sub-menu"></ul>. 

    .primary-menu .sub-menu li a {
  padding: 18px 22px;
  padding: 1.8rem 2.2rem;
}

    Remove or overwrite this padding from your stylesheet. You can also give the desired padding as you want in your submenu to display.

    .primary-menu .sub-menu {
 width: 200px;
 width: 20rem;
}

    or also remove these two width from your style.css

    Theme Author satoristudio

    (@satoristudio)

    Hello Brigid,

    1. For the layout issue, check out my answer to your other thread.

    2. This is how much space they get based on your custom font size settings (18px) – in Bento many elements scale automatically in proportion to the font size, which is the best practice in responsive web design. You can in principle alter this by changing the “padding” parameter of the submenu items, pretty much like @addweb-solution-pvt-ltd showed above.

    3. Again, this is because of the same “font-size” declaration from point 1 ?? since many lengths in Bento are in rem units, they get distorted if you change the body element font size (which is not recommended in any case). You can try adding this custom CSS to preserve the width of the submenu box: .primary-menu .sub-menu { width: 200px !important; }.

    Thread Starter briggreene

    (@briggreene)

    This is primarily for Add Webb

    I was very happy to receive your thoughtful response.

    Unfortunately I do not find the references you mention in either the style.css or the simple custom css.

    As there is not a place here to upload pics, I’ve made a page to show you what I mean….
    https://www.BrigidGreene.com/no-primary-nav/

    Thread Starter briggreene

    (@briggreene)

    Thank you satoristudio !

    I have taken out my custom css in simple custom css and applied font changes through customization, making the primary menu look much better.
    I also changed the alignment, which also improves things.

    2) There is still way too much space between sub menu items… and maybe that was supposed to have been addressed in part by Add Webb, but those comments don’t work for me. I’ve replied and we’ll see what the response is. In addition, though, the font size of the sub menus is too much smaller than the menu size.

    In the mean time I’ll try your response to my other issue.

    Thanks again.

    Edit – added the submenu font size change issue in 2)

    • This reply was modified 6 years, 3 months ago by briggreene.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sub-Menu item spacing super bad’ is closed to new replies.