[EyeconMediaParticipant]

Hi Staff,

I would like some change in the nav bar. I’m using the stack Integrity, Navbar position Fixed right. When hover across a menu-item de submenu pops-up at the left and at the same time the other menu-items stay fixed.
– How can I show the submenu-items without collapsing in and stay within the width of the navbar side width (170px) and at the same time al the menu-items stay visible?
– Or when I want to have the submenu collapse-in, how can I get the submenu stay within the width of the navbar side without acrossing the next menu-item? So the menu-item below the sub-menu-item drops down?

Hope you can help me.
Thx.

[EyeconMediaParticipant]

Attachement is a screenshot of the nav bar at this moment

[Paul RModerator]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[EyeconMediaParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Thank you for giving us your site URL. Please add the following CSS via Appearance > Customize > Custom > CSS

.masthead-inline .x-navbar.x-navbar-fixed-right .desktop .sub-menu {
    left: auto;
    right: 10px;
}
.desktop .sub-menu {
    position: relative;
    float: right;
    max-width: 160px;
}
.desktop .sub-menu a {
    white-space: initial;
}

Hope this helps.

[EyeconMediaParticipant]

Hi Staff,
Thx you for your help. The basis is working like you suggested. I added some more properties. The only property that is not working is the max-width / width of the sub-menu. I made the sub-menu transparent to obscure the overlap of the with background to the left. Bud it makes no different because now you see a transparant sub-menu. How can I change the width of the submenu? And how can I accomplish that all the text (menu and submenu) is aligned in vertical way (not centre but right or left).

Thx again for your help.

.masthead-inline .x-navbar.x-navbar-fixed-right .desktop .sub-menu {
right: 10px;
}
.desktop .sub-menu {
position: relative;
float: right;
max-width: 80px;
margin-bottom: 15px;
background-color:transparent;
box-shadow: none;
box-sizing: content-box;
}
.desktop .sub-menu a {
white-space: initial;
text-align: right;
margin-left:0px;
margin-right:15px;
}

[ThaiModerator]

Hi There,

Try adding following CSS under Appearance > Customize > Custom > CSS:

/* Submenu Align */
.desktop .sub-menu a {
text-align: left;
}
/* Submenu Width */
.desktop .sub-menu {
min-width: 250px;
}

Hope it helps.

[EyeconMediaParticipant]

Thx for the reaction. I made the min-width 150px and I think it’s alright now. apparently it’s stays inside the menubar.

Can you please help me out with the other question about aligning everything to the right? I mean the menu and the submenu?

And please can you tell me how the dropdown menu is working? Is it easy convertible with HTML5 code and Javascript or is it jQuery’s? I would like very much to have the menu-links clickable instead of hover, so to get an dropdown ON CLICK in stead of the hover. And that the submenu stays VISIBLE when it’s dropped down so the visitors can still see on which page they are. At this moment the sub-menu disappears.

Sorry that I have so many questions… I like the theme very very much so I want to continue to use this theme, but the options for the navigation bar have in my case few opportunities.
Hope you can help me out.
Thx

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.x-navbar .desktop .x-nav > li > a {
    text-align: right;
}

li.current-menu-parent > a > span {
    color: #ba7828;
}

In regards with click function, it could be possible with custom development which is beyond the scope of our support.

Hope it helps.

[EyeconMediaParticipant]

Oke, thx.

this code is working
.x-navbar .desktop .x-nav > li > a {
text-align: right;
}

This code is already applicable.

li.current-menu-parent > a > span {
color: #ba7828;
}
What I meant was that when the visitor is on a page, he or she can she the submenu-item because it stays visible (and a specific color, but thats already a property). at this moment the submenu disappears when you do not mouse-over the menu.

[EyeconMediaParticipant]

* …, he or she can not see the submenu-item because…….

(sorry, it was typed wrong :-))

[ChristopherModerator]

Hi there,

Please add this :

li.current-menu-parent > ul {
    display: block !important;
}

Hope it helps.

[EyeconMediaParticipant]

*… sorry, my expression is very poor….

What I would like is when the visitor is on a sub-page, he or she can still see the submenu-item in the nav-bar because it stays visible (and with a specific color, but thats already a property). At this moment the submenu disappears when you move the mouse away form the nav-menu. So the visitor doesn’t now what page he is visiting. Hope my explanation of my wish is understandable.

Thx again.

[EyeconMediaParticipant]

Hi staff,

our responses crossed! It’s working with your last suggestion:

li.current-menu-parent > ul {
display: block !important;
}

Now I’m trying to have this solution just only on the fixed-right nav bar.

Thx again. You’re great!

[Paul RModerator]

Hi,

You can change the code to this.

.x-navbar.x-navbar-fixed-right li.current-menu-parent > ul {
    display: block !important;
}

Hope that helps.

[Author]

Posts