In Pro: Do you know why the text is not centering in the header? I have clicked to center it in both the container and module itself. Also, why is there white on the sides of the green?
Hey @SE1217707,
Thanks for reaching out!
To center the text element in your Header Builder, you need to set the width of the text element to 100% and set it to center.
On the other hand, would you mind sharing your website URL so that we can check it properly about the white side of the green? It would also be best if you could share with us your admin credentials. To do that, please give us the following information in a Secure Note.
- WordPress Login URL
- Admin level username and password
You can find the Secure Note button at the bottom of your posts.
Cheers!
That somewhat worked! However the white on the right and left is still showing - including credentials in private email. Also, I am noticing that even though I saved the header changes - they are not working on my website at all and show what use to be there from the Theme Options section
Hi @SE1217707,
I have checked your Header and found that it is not assigned and that is why it is not showing on your website. I went ahead and assigned it to the Entire Site from Settings > Condition.
I have also found that the Gutter Spacing of 20px is set to the Bar > Content Sizing > Gutters, I went ahead and set it to 0, and now the space is removed.
Thanks
You rock! One thing I am noticing that is pretty important though, the menu and logo disappeared?
I was able to figure out how to add the logo back, but am having issues with the menu options, which do not look like what I had previously. I need the menu to be words along the top stating each of the menu items, and as the screen condenses down in size from desktop to mobile goes into the three bars with the word “MENU” next to it.
Hi @SE1217707,
It seems that you are not getting the Hamburger menu on the smaller screen devices. For that, you need to use a different element that will be visible only on the smaller screen. I would suggest you go through the following article on how to set up the Navigation.
And then you can add the following Navigation elements:
Hope it helps.
Thanks
I believe there is some confusion - three issues:
ISSUE ONE: I already have a menu set up, however it is not showing on the desktop or mobile.
The only options for “Menus” are “Megan Menu Modal” “Mega Menu Dropdown” and “Mega Menu Off Canvas” - none of which actually show the menu with words on the desktop.
The only work around I can tell is to do a widget - so I assigned the menu to a Header 1 widget. However, while my link color is suppose to be a deep green, they are showing as white font and all the way to the right side stacked on top of each other instead of pulled across.
ISSUE TWO: for mobile, or as the screen gets smaller and needs to be a hamburger menu, I do not want it to be a pop up menu like all three options you listed. I want it to be a simple menu that expands open like before - with the three bars and the word “MENU” next to it.
ISSUE THREE: The container for the logo is showing 0 for padding, and even when I change it to be -10 or -50 nothing changes. I need there to be less white space.
Hello @SE1217707,
This is what we are seeing in your custom header:
To display a menu, you need the Navigation Inline or Navigation Dropdown for desktop screens and Navigation Off-Canvas, Navigation Collapsed or Navigation Modal for smaller screens.
- https://theme.co/docs/navigation-inline
- https://theme.co/docs/navigation-dropdown
- https://theme.co/docs/navigation-collapsed
- https://theme.co/docs/navigation-layered
- https://theme.co/docs/navigation-modal
The Mega Menu Modal, Mega Menu Dropdown or MegaMenu Off Canvas, you still need to insert a Navigation element in it to be able to display the menu that you have created in Appearance > Menus.
For smaller screens, you need to use appropriate Navigation element. You can always show or hide the Navigation element by utilizing the “Hide During breakpoint” option in the Navigation element settings. Please check out this documentation:
Perhaps the video tutorials that we have in our channel may help you:
The blue line is your Container and then the yellow is the Image element:
Which white spaces you were trying to eliminate?
Best Regards.
For the navigation Bar 3…
-I am not understanding why it will not adjust as the screen size goes down? Why do I need to create breakpoints? Shouldn’t it just condense down like X themes previously had.
-For the navigation, I removed the gutters in the bar, and centered everything, yet its still not centering
-how will the website know when to switch to the bar 4 navigation?
For the navigation Bar 4…
-if I am required to have this because the Bar 3 won’t condense down, how can I center it and have it be a three bars with the word Menu?
-how can I have this only show on mobile?
For the logo, I would like to reduce the white space above and below it
Hi @SE1217707,
Here you are using the Navigation Inline element which does not behave like the default Menu which automatically shows the Hamburger menu on the smaller screen, you need to use the separate element which I specified earlier. Now if you set the Hide During Breakpoints for the smaller screen devices it will automatically hide the Bar 3 and shows the Bar 4 if you set it in that way.
Bar 3: is set to be hidden for 3 screen sizes as shown in the screenshot.
Bar 4: is set to be shown for that 3 screen sizes and hidden for the selected screen sizes, as shown in the screenshot.
For the logo, the height for the bar is set to 200px, I would suggest you set it to auto to reduce the space.
Hope it helps.
Thanks
A few follow ups…
- The navigation for both bars is not centering - how can this be centered
- I would like to change the hamburger menu to be three bars with the word “MENU” next to it, how can this be achieved? I also would like the hamburger bars to no longer have a shadow around them or be a circle - just three bars with the word MENU next to it
Hi @SE1217707,
I have checked your website and found both the Menu is in the center. I went ahead and removed the Border Radius and the Box Shadow from the Hamburger menu and added a Text element with the Menu only as a text.
Thanks
YOU ARE FREAKING AMAZING - THANK YOU!
For Bar 1, I brought it in percent wise to be smaller, but on mobile its looking a little too condensed. How can I fix this?
Hello @SE1217707,
It seems that you have set the Margin-left & right of the Text element, I would suggest you go to the Header—>Bar 1—>Text Element ---->Design ---->Margin —>Click on the Left/Right you would get an option to set the margin for each device, you can decrease the margin here.
Thanks
For the burger menu, you have the word MENU as text - can this be a clickable element to open the navigation that is connected to the burger menu?
For the Menu, can I also add a search icon - I use to have a magnifying glass there 
Also, the phone number on mobile is showing as dark in color (literally can only see this if you are looking at your phone) - how can I have it show correctly as white in color?
Hello @SE1217707,
The word “Menu” is just a text because you have added a Text element.
Please remove the Text element and then in your Navigation Modal element, find the Toggle element option. This is where you can enable the Text and the Icon for your Navigation Modal element toggle.
In Navigation Modal > Toggle > Size, you need to set the width and height of the Toogle to auto.
And then you add the word “Menu” in the Navigation Modal > Toggle > Text > Primary field.
You can use the Search elements:
As for your phone number, you can insert <span style="color: #fff;">{your number here}</span> just like what you did to the other text.
Hope this helps.
YOU ARE AMAZING! Do you know how to change the font color on the module for when it pops up with the navigation link options to click?
Hello @SE1217707,
Can you please elaborate this question?
“Do you know how to change the font color on the module for when it pops up with the navigation link options to click?”
If you can send some screenshot, that would really help. Thanks.
For the search, I would like it to be an option within the menu - so before the magnifying glass was a part of the menu. Is this possible?
For the colors in the navigation, it is currently a white font and I would like to change it to be another color.
Hello @SE1217707,
To demonstrate to you how you can edit your mobile menu and add a search next to the menu, please check out the video demonstration in the secure note.
Best Regards.