custom menu width

  • On my sidebar I have two custom menu buttons. I want them to have the same width. Below is how the top one is currently formatted. I wanted to make it the same width as the one below it. What would I change?

    #menu-bareyourbudget a{
    border: 2px solid #ed702b;
    color: #ed702b;
    font-family: ‘Oswald’,sans-serif;
    font-size: 24px;
    margin: auto;
    padding: 10px 30px;
    }
    #menu-markbudget a:hover{
    color:#fff;
    background-color:#ed702b;
    text-decoration:none;
    }

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

  • The easiest way to do this would be to change the padding on the left and right for that particular selection: The following code works fine:

    #menu-bareyourbudget a {
  border: 2px solid #ed702b;
  color: #ed702b;
  font-family: "Oswald",sans-serif;
  font-size: 24px;
  margin: auto;
  padding: 10px 41px;
}

    You can see that i’ve just adjusted the padding to 41 from 30.

    Thread Starter 2chihuahua

    (@2chihuahua)

    Thank you! Any idea how to change the spacing between the two menus?

    If you just want to add spacing to the bottom of the one that says “Bare Your Budget” then you can use the following which targets that specific menu:

    .sidebar #nav_menu-4 {
  margin-bottom: 48px;
}

    Obviously change the pixel amount to what you want it to be. If this is not what you are looking for, then i am not quite sure what you want to do…

    Thread Starter 2chihuahua

    (@2chihuahua)

    That’s exactly what I was looking for! Thanks! How did you find the name of that menu to target it as “#nav_menu-4”?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘custom menu width’ is closed to new replies.

Tags