Docs

[gobeyondesign]

http://www.tsi4usa.com

How do I make my second menu on the about us page horizontal, with no background, and bolder larger text?

[Joao]

Hi There

Would you mind clarifying what second menu you are referring to?

Can you provide a screenshot ou provide more details about the location?

Thanks

Joao

[gobeyondesign]

tsi4usa.com

go to the about page

under the top picture with the asian lady, there is a menu under there – its vertical – I’d like it horizontal with the ability to remove or add a background color and edit the hover color.

Thank you.

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

ul#menu-about-us {
    margin-bottom: 30px;
    background-color: #ddd !important;
}

ul#menu-about-us li {
    float: left;
}

ul#menu-about-us li a:hover {
    background-color: #494949 !important;
    color: #fff !important;
}

.widget_nav_menu .current-menu-item>a {
    background-color: #ebebeb !important;
}

Thanks.

[gobeyondesign]

How do I center these buttons horizontally – I would like the buttons to be equally spaced

I would also like to make the background transparent unless its being hovered over?

Thank you so much!

[Rupok]

Hi there,

Let’s update the whole code a bit :

ul#menu-about-us {
    margin-bottom: 30px;
}

ul#menu-about-us li {
  float: left;
  text-align: center;
  width: 25%;
}

ul#menu-about-us li a:hover {
    background-color: #494949 !important;
    color: #fff !important;
}

.widget_nav_menu .current-menu-item>a {
    background-color: #ebebeb !important;
}

Hope this helps.

[gobeyondesign]

that sort of made it look ok, but it created a second row because one of the buttons is two lines and there is a border – can we remove the border? And can we vertically align the information so if one item is two lines its equally spaced vertically?

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

.widget_nav_menu ul li a, .widget_meta ul li a, .widget_pages ul li a {
    border-bottom: none !important;
    box-shadow: none !important;
}
ul#menu-about-us li {
    float: none !important;
    display: table-cell !important;
    vertical-align: middle !important;
}
ul#menu-about-us {
    display: table !important;
}

Let us know how this goes!

[Author]

Posts