Docs

[nimnav]

Site URL: http://nima.morscad.com/
Reference images: https://we.tl/K8I0GGMoRM

Hello,

Can you please help me achieve the following:

I want the sub-menu drop down list to span within the header, and not popup in a box.
“01.HOME.jpg” displays header/ nav bar in default mode.
“03.PROJECTS.jpg” displays when a typology is selected, various types span out.
“04.TYPOLOGY_STATUS.jpg” displays when a particular project is selected, various states of projects span out.

Also when hovering over nav items, I want to make the text background white, and keep text color black.

Thank you in advance!
Best,
Nima

[nimnav]

Sorry uploading directly failed.

Images available here: https://we.tl/K8I0GGMoRM

[Rad]

Hi there,

Thanks for posting in.

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS,

.x-navbar .desktop .x-nav > li a {
    text-align: left;
    color:#fff;
}
.x-navbar .desktop .x-nav > li {
padding-left: 50px;
}
.x-navbar .desktop .x-nav > li > .sub-menu {
position: static;
margin-left: 40px;
background-color: transparent;
box-shadow: none;
float: none;
}
.x-navbar .desktop .x-nav > li.current-menu-item > .sub-menu {
display: block;
}
.x-navbar .desktop .x-nav > li.current-menu-item > a span {
color: pink;
}
.x-navbar .desktop .x-nav > li > .sub-menu a:hover {
background-color:#fff;
}
.x-navbar .desktop .x-nav > li > .sub-menu a:hover span {
color: #000;
}

Hope that helps.

[nimnav]

Hello,

Thank you so much, worked perfectly.

I’m trying to make a couple additional adjustments like this: https://we.tl/5od0LLJ3zf
1: to remove the band next to each menu item and
2: to only highlight the text not the whole width when hovering or on selected page
3: currently i have added an empty page under odD+ to provide some spacing between the first element and the rest, while this works, is there a better solution where the empty slot is actually attributed space and not an empty link?

Thank you so much for the amazing support,
Best,
Nima

[nimnav]

Sorry just wanted to make sure what i said makes sense:
So I’m trying to simplify the styling: black text, when hovering over or when selected, only the immediate text background goes black not the whole width. Also this means no black border, red box or any other animations when a menu item is clicked. Just like the wetransfer image in the last message and not like it currently stands on my site: http://nima.morscad.com

[Paul R]

Hi,

We can no longer access your site, it’s under maintenance mode.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[nimnav]

This reply has been marked as private.

[Rue Nel]

Hey Nima,

Thanks for providing the login credentials. To resolve your menu items, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
  background-color: transparent;
  box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a:hover span, 
.x-navbar .desktop .x-nav > .x-active > a span, 
.x-navbar .desktop .x-nav > .current-menu-item > a span{ 
  color: #fff !important;
  background-color: #000;
  padding: 0 5px;
}

Hope this would work out for you.

[nimnav]

Hi Rue,

Thank you so much for your help!

In order to provide a bit of spacing in between the first element in the navbar (odD+) and second element (news) i added an empty page and for the Navigation Label I added a <br>.
This gives me exactly the look i want to achieve (nima.morscad.com), however when hovering over the empty slot it will be highlighted since it’s actually a link to an empty page, which is no good if someone clicks on it as well, it will take them to an empty page. Instead of this rather messy hack is there a proper way to provide a bit of spacing exactly like the way it looks now?

Thank you again for the excellent support!
Nima

[nimnav]

Very sorry but one more issue, how can i get rid of the black border and red square around menu item once clicked.

[Paul R]

Hi,

To remove it, you can add this under Custom > CSS in the Customizer.

.x-navbar-fixed-left .desktop .x-nav>li>a:focus, 
.x-navbar-fixed-left .desktop .x-nav>li>a:hover {
     box-shadow:none !important;
     outline:none !important;
}

Hope that helps.

[nimnav]

Thank you that did it, how about the previous issue i mentioned #987164 –> spacing between 1st element in navbar and the rest.

[Christopher]

Hi there,

Please add this :

li#menu-item-359 {
    margin-bottom: 10px;
}

Thanks.

[nimnav]

Thank you!

[Lely]

You’re welcome!

Cheers!

[Author]

Posts