Current menu item

  • Resolved dammsugare

    (@dammsugare)


    6 years, 3 months ago

    Hello,
    I have placed some html in my sidebar like this

    <div class="menu shopmenu"><a href="...">Clothes</a>
<h4><a href="...">Hats</a></h4>
<h4><a href="...">Shoes</a></h4>
</div>

    and I want the current menu item to be displayed in green, so when you are n the “Clothes” page for example, this link would be green.

    Could you help me with this?
    Thanks in advance.

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

  • Can you please post a link so that I can see if this is possible?

    Thanks,
    Kevin

    Thread Starter dammsugare

    (@dammsugare)

    Sorry I cannot…but you understand what I mean? I just want the current menu item to be displayed in green. For the main navigation I know this can be set in the theme options, but how can I achieve this for html links in my sidebar?

    Instead of adding the menu via html, I suggest going to appearance> Wigets, and assigning a navigation menu widget to your sidebar.

    Assign whatever menu you’ve created to the widget, and then this CSS will target the current menu item in your sidebar:

    .sidebar .widget-inner .current-menu-item {
    background: #34346b7d;
    padding: 5px;
}

    Just change whatever CSS you want for the current menu item. Let me know if you need any further assistance.

    -Kevin

    Thread Starter dammsugare

    (@dammsugare)

    I guess I would need to use

    .sidebar .widget-inner .current-menu-item a {
    color: green;

}

    but if I use the menu widget I also need to style the menu – remove bullets, remove left padding, make font a different family, different font-size, different color etc…I thought by using my h4 I can skip all the styling and already have the font the way I’d like to…

    You can use the html, but you will not retain the ability to select the current menu item with CSS. You would have to change some other code, which would be much more complicated than this CSS.

    You can remove the bullet styling, the padding, and control the font of the menu with this CSS:

    .sidebar ul#menu-customer-service {
    list-style: none;
    padding-left: 0;
    font-size: 24px;
}

    -Kevin

    Thread Starter dammsugare

    (@dammsugare)

    Okay, will do! Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Current menu item’ is closed to new replies.