Menu Styling - by Dom1788 - on WordPress WooCommerce support

This topic has 7 replies, 4 voices, and was last updated 9 years, 9 months ago ago by Jack Richardson

  • Avatar: Dom1788
    Dom1788
    Participant
    March 24, 2016 at 09:38

    Hi ,

    I saw another topic regarding menu styling and have implemented the CSS code you gave as a solution for changing the background. This has changed my sticky menu but I would like it to apply to the first header and have a hover background instead of the underline. I want the sticky menu to stay as just highlighted text colour but the first menu to have the background hover.

    Also is it possible to have a highlighted menu item? I want “Join Now” to stand out like it does on this example in the top right: http://www.ottocar.co.uk/about-us

    I have tried adding an image to the menu item as a potential solution but it does not work.

    Please, contact administrator
    for this information.
    6 Answers
    Avatar: Robert Hall
    Robert Hall
    Participant
    March 24, 2016 at 09:53

    Hello,

    Please try to add this code in Global Custom CSS.

    .header-wrapper .menu > li > a:hover{
        background-color: #00b5ce;
        color: white;
        border-radius: 0.5em;
    }
    .menu #menu-item-22375 > a {
        background-color: #96d600;
        color: white;
        border-radius: 0.5em;
    }

    Regards,
    Robert Hall

    Avatar: Dom1788
    Dom1788
    Participant
    March 24, 2016 at 10:02

    Thanks Robert, thats worked!

    Am I able to increase the padding around the text and also remove the underline? And is there a way to increase the margin between “join today” and “community”?

    Also, on my secondary pages, I would like decrease the space between the header and the content (see link in private content)

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Participant
    March 24, 2016 at 10:16

    Hello,

    1. Please use this css code:

    .menu #menu-item-22531 > a, .header-wrapper .menu > li > a:hover {
       padding: 10px;
       text-decoration: none;
    }
    .menu #menu-item-22531 > a {
       margin-left: 20px;
    }

    2. Add this code in Global Custom CSS:

    .content-page, .page-content {
        margin-top: 0px;
    }

    Regards,
    Eva Kemp.

    Avatar: Robert Hall
    Robert Hall
    Participant
    March 24, 2016 at 10:21

    I’ve changed code in Global Custom CSS. Please check.

    Regards,
    Robert Hall

    Avatar: Dom1788
    Dom1788
    Participant
    March 24, 2016 at 12:02

    Works great! Thank you

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 24, 2016 at 12:42

    Hello,

    You’re welcome.

    Best regards,
    Jack Richardson.

  • Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Menu Styling’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.