Archived topic
How can I change the Navigation Menu text alignment in Slider Theme?
11 replies · Started by Daniel on August 24, 2021
Hello Team,
I originally asked this on a thread regarding a different question about Slider and was asked to create a new topic for it. That issue was resolved, so thank you all for your amazing customer service, as usual.
I am working on a new site design and using the Sider theme. The issue I'm having is with the text alignment of the, now vertical, Primary Navigation Menu in the side header. I've placed a link to my site in Private Info, and as you will see, all menu items are aligned center by default, with a few items having submenu carrots. When you click on the carrots, however, that main menu item jumps to be left aligned, along with the submenu items.
To resolve this, are either (or both) of the following two concepts possible?
1) Can all items remain aligned center? So that when the carrot is clicked, the main menu item remains in the same place and the submenu items are listed below it, but also centered?
-=OR=-
2) Is there a way to make this menu display like the Off Canvas Menu does? So that all main menu and submenu items are aligned to the left, with the dropdown carrots being aligned to the right?
2a) If this option is possible, is there also a way to indent the Submenu items, so they're not in perfect alignment with the main menu item?
Thanks in advance!
Hi Daniel,
Try this CSS for the 1st concept:
.site-header .main-navigation li {
text-align: center;
}Let me know if this works :)
Hi Ying,
That worked! Thank you.
I'd still be interested in trying to accomplish Option 2 & 2a, if possible. If it's not, I can at least work with this.
Try this CSS for concept 2 :)
.site-header .main-navigation .main-nav > ul {
align-items: flex-start;
}
.site-header .main-navigation .main-nav > ul > li.menu-item-has-children > a {
justify-content: space-between;
display: flex;
width: 100%;
}
.site-header .main-navigation .main-nav > ul > li {
width: 100%;
}
.site-header .main-navigation .main-nav > ul > li > ul > li > a{
padding-left: 30px;
}So close! Looks great until the carrot is clicked. Then, the submenus are indented, but everything else shifts to the left. Thoughts?
Try change this CSS:
.site-header .main-navigation .main-nav > ul > li {
width: 100%;
}to this:
.site-header .main-navigation .main-nav > ul > li {
width: 250px;
}Let me know :)
BOOM! It's beautiful... *sheds tear*
One additional question related to this. Is it possible for the submenu to remain open when one of its links as clicked? So, as an example on my test site, I've added the 'hello world!' post as a submenu link under the 'about' main menu item. If I click on 'hello world', it collapses when it loads the post. Is there a way for it to stay open if that's my current page?
Thank you!
The behavior is actually controlled by JS, not ideal to control it by CSS, but give this a try:
.current-menu-ancestor > ul, .current-menu-parent >ul, .current_page_parent > ul, .current_page_ancestor >ul {
display: block !important;
left: auto !important;
right: auto !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
height: auto !important;
overflow: visible !important;
}The CSS will effect the off canvas menu as well, let me know if you only want it on the fixed site header.
Works like a charm! Thank you so much, Ying! The customer service all of you provide here is truly the best I have received anywhere. :)
Glad to hear that :)
Thanks Daniel!
This has just helped me :)
But...how can I now align the mobile menu to the right hand side of the screen in the Slider theme?
Hi there,
could you raise a new topic and share a link to your site so we can advise
