How to align menu-items/links in the primary nav placed on fixed left side

Hi there,

Something like our Sider site in the Library?: https://generatepress.com/site-library/

If you're starting a fresh site, you can start with that site.

If not, I should be able to give you some CSS.

Let me know :)

Yes Tom... I have used the Slider site from the library (however, I did that on an already existing site and not on a fresh one).

I tried putting in some css to get the menu formatting the way I want it look (as in the site mentioned above). Nothing seems to work... how do I get rid of the down arrow? How to change the menu items from button style to more like text.. with heading and links below...?

Appreciate your help... thanks!

Hi there,

Tom provides the CSS here for removing drop down arrows:

https://generatepress.com/forums/topic/arrow-on-menu-drop-downs/#post-172450

You can style the navigation in the Customiser > Colors > Primary Navigation - just set the background colors and hovers to transparent or the appropriate colors.

I set the colors through Customiser > Colors > Primary Navigation - so that part is good.

I am able to remove the down arrow - however is here a way to keep menu expanded at all times? I read here: https://generatepress.com/forums/topic/show-sub-menus-expanded/ - this is possible by keeping all the menu items in the top-level menu itself.

However, I'm trying to group the menu items in sub-sections (like here https://seths.blog/) - headings and links below them.

Is there a way to keep the menu expanded at all times so that Menus and Sub-Menus visually appears like Headings with Links below it?

Hi there,

this topic should help:

https://generatepress.com/forums/topic/keep-dropdown-submenu-items-visible/#post-258308

David... that doesn't seem to work. Tried various other css on that long post as well. Not able to get the layout to what I would like. I'm trying to keep the Connect menu expanded (but it doesn't) - the css is currently applied to the site - if you'd like to take a look.

I cant see the Connect menu item, just Home, Twitter and Medium ?

Some issue with caching... I set it right now. Can you check again?

Aah ok, i though you were using the sidebar looks like you switched to using Sider / Navigatior site. In that case try removing the .sidebar class from that CSS.

I removed the .sidebar class - still no change. This is the css now:

.main-navigation .main-nav .sub-menu {
    opacity: 1 !important;
    display: block !important;
    left: auto;
    right: auto !important;
    position: relative;
    width: 100%;
    clear: both !important;
    top: auto;
    float: none;
}

.dropdown-menu-toggle {
    display: none;
}

Give this a shot:

.main-navigation .main-nav .sub-menu {
    opacity: 1 !important;
    display: block !important;
    left: auto;
    right: auto !important;
    position: relative;
    width: 100%;
    clear: both !important;
    top: auto;
    float: none;
    visibility: visible;
    height: auto;
}

.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}

Nice.. that worked! However the sub-menu items now align next to each other rather then below one another. Any way to fix that?

Cool, right in the Additional CSS, you have this media query @media (min-width: 769px) { the very last rule is removing the float from the li which is causing them to stack.

Add this additional rule within the media query so it doesn't effect sub menu items:

.main-navigation ul ul li {
    float: left !important;
}

Awesome..! that works perfect. Thank you!