Adjusting menu padding for desktop?

  • Resolved rdemanow

    (@rdemanow)


    3 years, 11 months ago

    So, I’m using the Go theme with some modified colors, and when viewed on the desktop browsers the drop-down child menus have a really thick primary color border on them (same color as the text).

    I would like to slim that border down.

    When I bring up “inspect element” it shows the box model has 12 pixels of padding on all sides of the box.

    If I go into the “Filter Styles” section and I found this:

    .primary-menu .sub-menu {
    display: none;
    left: 50%;
    padding: .75rem;
    position: absolute;
    text-align: center;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 200px;

    If, in that section of the element inspector, I change the “padding: .75rem” to “padding: .1rem”, it makes the border around the menu appropriately thinner.

    So I tried going into Customize -> Additional CSS and add:
    .sub-menu {padding: .1rem}

    … and nothing happens. The border is still thick.

    So I tried .primary-menu {padding: .1rem} … same thing.

    So I tried .primary-menu .sub-menu {padding: .1rem} … same thing.

    Still thick border around the pull-down menus.

    Strangely enough, I’m successfully modifying the capitalization in those menus using .primary-menu a {text-transform: capitalize} and .menu-item li a {text-transform: capitalize}

    How do I reduce the padding around those drop-down menus?

    • This topic was modified 3 years, 11 months ago by rdemanow.

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

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

  • Hi

    You are missing a “;” at the end of the code se lie this

    .sub-menu {padding: .1rem;}
    and in all other code it is the same

    Always cooking
    Immer beim kochen
    Sempre a cozinhar

    Phillip Moringer

    • This reply was modified 3 years, 11 months ago by chefwildboar.

    Try this code instead, put the code in Additional/Custom CSS section.

    
@media only screen and (min-width: 960px) {
	.primary-menu .sub-menu { padding: 5px; }
}
    Thread Starter rdemanow

    (@rdemanow)

    `@media only screen and (min-width: 960px) {
    .primary-menu .sub-menu { padding: 5px; }
    }`

    That did the trick. (I used .1rem instead of 5px, though)

    What, exactly does that “@media only screen and (min-width:960px)” part do? Is that something the PHP parses to decide whether to use a desktop or mobile layout?

    It’s “CSS Media Queries”, in this case it’s used to confine the CSS rules to certain screen width.

    When the original CSS is enclosed in media query, we need to do the exact same thing in our CSS to override it.

    Thread Starter rdemanow

    (@rdemanow)

    Ah. I hadn’t encountered that before.

    Thank you.

    I’m having a similar problem with the Go theme’s menus on desktop. In my case, I don’t mind the padding so much, but the last item in the list is never centered with the others. If you visit https://ergochew.com and hover over the first menu drop down, you’ll see what I mean.

    Any suggestions on a fix? It looks to me like the final padding element is missing as the last item has a different position for center.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adjusting menu padding for desktop?’ is closed to new replies.