Home>Support>Sidebar Menu Style

Sidebar Menu Style

By jwromine, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi,

I am trying to create a sidebar menu that is different from the main page menu and only appears on certain pages. I have done this by placing a “custom menu widget” In the sidebar of the pages I want it to appear on. This is working.

The issue is: I am trying to find a way to make it look a little better than just a list of blue links.
You can see how it currently looks here: http://guideautomation.com/kollmorgen/

Basically I would like it to look more like the horizontal main page menu that you see at the top of the page.
Is there an easy way to do this?

Thanks,

Joe

URL: http://guideautomation.com/kollmorgen/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hey Joe

    You can use Jetpack Widget Visibility to conditionally display it. Just a quick tip in case you haven’t solved that part yet:
    http://jetpack.me/support/widget-visibility/

    For the menu you can use in Custom CSS:

     /* Sidebar Custom Menu Widget */

#secondary .widget_nav_menu ul li {
background: #343538;
}

#secondary .widget_nav_menu ul li a {
  color: #e2e2e2;
  padding: 10px 20px 10px;
  display: block;
}

#secondary .widget_nav_menu ul li:hover > a {
background: #00bcff;
color: #fff;
}

    Edit as required :)

  2. 9 years, 3 months ago jwromine

    Hi Andrew,

    Thanks for the reply. I have already figured that part out – the menu is currently only appearing on the pages I want. But i will keep the method above in mind as another way to achieve that.

    What I really hoping you could help with is getting that second menu to look like main page menu. As you can see from the link I sent, the main page menu is a black bar with each menu item in white text. When you hover over each item, they become highlighted in blue.

    For the secondary sidebar menu I have on the sample page, you see the menu as a simple list of blue links on the page background color (white). I am trying to get this menu to look a little more like the main page menu.

    Thanks,

    Joe

  3. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hopefully there isn’t a big lag in our messages going through. The CSS I sent sorts that all out.

  4. 9 years, 3 months ago jwromine

    Ah, sorry – yes it came through, but I misunderstood what you were saying.
    I understand now, and the code you sent though is working perfectly!
    Thanks for your help!

  5. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad to hear that did the trick :)

    All the best.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More