[Resolved] Styling Vertical Menu

[Mark]

Hi there,

I am working on setting up a fixed left side vertical menu. I don’t want to use the side bar as I need that for other things.

I started of using the code from this forum topic:

https://generatepress.com/forums/topic/about-vertical-menus/#post-847809

Which was a great start.

I tweaked the code a little becuase I also wanted to hide the slide out menu toggle button on the top right corner. and adjust the width of the side bar.

Here is my final CSS:

/* Sets Slider out to permanently on*/
@media (min-width: 768px) {
    .offside,
    .offside--left {
        left: 0 !important;
	padding: 10px;
    }

    body {
        margin-left: 240px;
    }
	.main-navigation.offside {
    width: 200px; 
    }
#generate-slideout-menu .inside-navigation {
margin-top: 120px;
}
    .sf-menu>li.slideout-toggle.menu-item-align-right {
        display: none;
    }
}

There are a few things I still want to solve.

1. I would like the left side menu to begin under the top navigation bar. this would put the logo and nav bar above the left side menu. One reason for this is that the left menu obscures the default wordpress admin bar when working on the front end. the second is that I want the left menu to be part of the page content.

2. I’m having issues when switching to different pages. The width of the left side bar and its grid container change depending on what Page im on. for example if you click the “login” link the side menu is one size. if you click the “My handbooks” link then the menu is narrower. how do I set the left menu to a fixed width regardless of the page it’s viewed on?

3. Is is possible to add icons to the menu items in the left side menu?

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

1. Try this CSS:

#site-navigation:not(.is_stuck) {
    margin-left: -220px;
}

2. Thats weird one page is respecting the box-sizing and the other isn’t. Try updating this CSS with the additional rule:

@media (min-width: 768px) {
    .main-navigation.offside {
        width: 200px;
        top: 60px;
        box-sizing: border-box; /* add this rule */
    }
}

You may want to increase the width of the nav as they will all be of the reduced size.

3. This article explains using FA Icons:

https://docs.generatepress.com/article/adding-icons-to-menu-items/

As you can see from that the nav label accepts HTML, so you can just add your icons inline using HTML.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Hi David,

Thanks a heap for that.

That fixed the issues I was having!

Now I just need to work on the icons.

Thanks again.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts