The mobile nav button is the standard image with three lines.
I’d like to know how I can change this to contain the word MENU, instead of the lines.
Our primary audience is 40-60 years old, and half of them don’t know what the lines mean.
I’d also like to know how to change the menu button colors.
And how to change the background and link and hover link colors on mobile only.
Please advise.
Jesse
Hello Jesse,
Thanks for writing in!
I can see that you are using Pro theme. I have your site urls but I cannot check the sites because we need to log in first. Assuming that you are using a custom header, to resolve your issue, please do the following:
1.) Edit your header and click on the mobile navigation element. (I am not sure which element you are using)
2.) In the navigation element settings, find the Toggle tab.
3.) In Menu > Toggle > Text, Enable the text menu setup and insert “Menu” as the primary text.
4.) Find the Graphic Set up option and disable it so that no graphic icon or the three bars will not display.
And if you are just using the default header, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
#x-btn-navbar .x-icon-bars:before{
content: "Menu";
}
We would love to know if this has worked for you. Thank you.
We are not using a custom header. I have no idea how to use the Pro Header and Footer builder, it’s wildly complicated compared to the rest of the X theme builder.
I’ve added:
#x-btn-navbar .x-icon-bars:before{
content: “MENU”;
color: black;
font-size: 12pt;
}
but the menu word isn’t vertically centered.
Any fix for that one?
And how do i change the menu background, link, and hover colors for mobile only?
Hi Jesse,
I tried to check the URLs that are assigned to your licenses but they require a login to be viewed. Can you please provide us with the URL of the site in question so that we can provide you with the code suggestion?
Thank you.
credentials removed.
Hello Jesse,
Find this custom css:
.x-btn-navbar, .x-btn-navbar.collapsed {
font-size: 24px;
}
And replace it with this:
.x-btn-navbar, .x-btn-navbar.collapsed {
font-size: 12pt;
}
And to change the background colors, please use this code:
.x-btn-navbar, .x-btn-navbar.collapsed,
.x-btn-navbar.collapsed:hover {
font-size: 12pt;
background-color: red;
}
To change the link and hover link color, you use this:
#x-btn-navbar .x-icon-bars:before {
color: white;
}
#x-btn-navbar.collapsed .x-icon-bars:before
#x-btn-navbar.collapsed:hover .x-icon-bars:before {
color: yellow;
}
Hope this helps. Please let us know how it goes.
I’m describing this badly I guess.
I’m looking for the MENU button that appears on collapse to be vertically aligned with the logo.
AND i’m looking to change the background color of the entire NavBar based on screen width.
And i’m looking to change the link colors for both hover and regular based on screen width.
I want the background to go from black to white.
And i want the links colors to swap from what they currently are (white and #0089a7)
Is this possible?
Hi Jesse,
Try this CSS:
@media (max-width: 979px){
.masthead-inline .x-btn-navbar {
margin-top: 35px; /*Adjust menu vertically*/
}
header.masthead.masthead-inline .x-navbar{
background-color:white; /*Navigation background color*/
}
.x-navbar .mobile .x-nav li > a{
color: #0089a7 !important; /*Menu link color*/
}
.x-navbar .mobile .x-nav li > a:hover{
color: white !important; /*Menu link hover color. You might need to change it to make it visible*/
}
}
The following guide might help you:
OK, we are almost to where I need to be, thank you!
One last part. How do i get the very top background to stay black?
And if not possible, how do i get the Nav Logo image to swap out a variant that works with a white background?
Thank you for your help!
Hey Jesse,
As you see customizing the X header requires a lot CSS coding which is outside of our support scope, you can customize the X header’s basic settings via X > Theme Options > Header however X header was not designed for in-depth changes as we often receive header related customization questions or requests and this was the reason why a header and footer builder was created and an advanced X version was formed now called Pro . If you need in-depth changes, please consider using Pro’s header builder feature so you can build a custom header yourself without custom coding. In case you get stuck with the options, we’re here to assist all the way. Please see https://theme.co/docs/header-footer-overview
However if you want to stick with the original header then you can add the following code in the Theme Options > CSS to make the navigation bar black:
@media screen and (max-width: 767px) {
body header.masthead.masthead-inline .x-navbar {
background-color: #000;
}
}
But please note that custom development is outside of our support scope so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.
Hope this helps!
No, that undoes part of what i’m trying to accomplish.
I think it may just be better for me to hide the nav logo entirely and adjust the menu button location.
I may even swap the menu button with a full width image.
Thanks for you help thus far.
You are most welcome!
If you need anything else we can help you with, don’t hesitate to open another thread.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.