Solved

Moved my nav menu to my header, but customizations not showing up

  • 20 September 2021
  • 19 replies
  • 141 views

Userlevel 2
Badge

Hi folks,

I had an Elementor Pro nav menu built but didn’t like the way it looked, so I’ve moved it to my header bar. It’s supposed to be two even purple columns all the way across, but I can’t get the 2nd column to be the same height as the first, no matter how much I futz with margins and padding. This shouldn’t be that hard!! There doesn’t seem to be a hard numerical control for height for menus. My site is www.gailsstory.com.

Also can’t figure out how to move my logo next to my stylized text on the left. The gallery wants to place it above or below, but won’t let me drop it right next to the text.

Sorry for such newbie questions! Elementor is difficult to figure out.

Thanks,

Gail

icon

Best answer by Sharon Vos 24 October 2021, 17:06

View original

19 replies

Userlevel 6
Badge +1

Looks like you’ve got one section too many and, as a result, one nav menu (toggle) too many in mobile/tablet view.

Suggestion for a simple(r) header:

  1. Create a 1-column section.
  2. Drag your logo widget into the section.
  3. In edit mode for the logo widget, click on the Advanced tab, go down to Positioning and change the width inline (auto).
  4. While still in edit mode for the logo widget, click on the Content tab, set the size of the logo and set the alignment to left.
  5. Drag your menu widget into the same section as your logo.
  6. Repeat step 3 for the menu widget.
  7. Click on the Edit Column icon, top-left of your section.
  8. Under Layout, set Horizontal Align to Space Between.

You may need to adjust margins and paddings for your logo and nav menu.

 

Hope that helps.

Userlevel 6
Badge +1

PS: if you want “true tales from a wind-tossed life” as a part of your header, just drag the text widget into the same section… except this time you don’t have to change the width; it will take up the entire width of the section, below the logo and the menu.

Userlevel 2
Badge

Thank you for this, Simon. I will give it another go this week and let you know if it worked for me. I’m not too adept working with the widgets. I’ll try it! What I was doing was modifying a how-to header/nav menu from a YouTube video; hence the reason for the 2-column format.

Thanks for the detailed answer,

Gail

Userlevel 2
Badge

Simon,

OK tried this today. It’s not working on several levels:

  1. The site logo: I dragged it into the new section, but when I try to resize, instead of creating a thumbnail, it just chops the front and back half of the logo off! What the heck?! Whoever heard of a program that can’t scale a graphic down properly. I tried this in both Firefox and Chrome, thinking it might be my browser.
  2. It won’t let me pull the nav menu into the same section, even when I have the logo left-aligned. I get the ‘verboten’ symbol.

This is what I want to achieve: a purple header bar all the way across. I want my gail’sstory.com text (with my custom font) on the left, and if I’m very lucky, a tiny thumbnail of my logo next to that. Then on the right, I want my nav menu in white. Very simple and clean. That shouldn’t be hard to accomplish but I’m having a hell of a time. If I could pull the menu widget into my current header bar/purple section right now, I wouldn’t be posting. But for some reason I’m prevented from doing so.

Underneath that, I want my ‘true tales’ line, just the way I have it now. On all devices that I’ve tested, that line sticks with the header bar so there is no need to change anything there.

If you have any more ideas for me, I’d love the help.

Gail

Userlevel 2
Badge

I’m pleased to say I’ve made some headway since my last post. I found that the reason I could not drag my nav menu into my header was because both elements were set to Full Width. Once I set them to Inline, bam! It magically jumped into my header. As I said, I’m quite new at this so thank you for your patience with a newbie with Elementor. I still do not understand why it won’t rescale my logo, however.

Now, my current issue is how to get the header to go across the whole page, since both elements in there are now set to Inline. If I set either one to Full Width, it will kick the nav menu out. I have the alignment on the nav menu set to Right, but it’s not budging.

Gail

 

Userlevel 2
Badge

I still need help, if anyone’s listening!! I thought I had a tolerable header until I checked it on my iPhone 12 tonight, and it’s totally broken there. It breaks into two sections (even though it’s not a 2-column header anymore) and the hamburger menu won’t open up at all. When I test in Responsive mode on my desktop, it does break up into two sections but the hamburger menu opens up into a dropdown menu the way it’s supposed to. In real life, nothing happens. Why would this be happening and how do I fix this?!

Gail

Userlevel 7
Badge +4

@Simon Latham are you able to help further with this issue, it would be really appreciated, thanks :)

Userlevel 6
Badge +3

Hi do you still need help with these, let me know more.

Userlevel 6
Badge +3

If its fixed please mark best answer and solved

Userlevel 2
Badge

@Susan Hope , Simon never got back with me on this menu issue.

On my iPhone, the hamburger menu does not open up, so is not functional. Yet when testing in Responsive mode on my computer, it does, so I’m at a loss how to fix this issue.

Also, I still can’t figure out how to get my header to go all the way across. When playing with various settings, I see that I can force it across via a Custom width, but then that does ugly things in Tablet and Mobile views. If I change the Menu section to any width but Inline, it drops to a second line, which I obviously don’t want. I’m trying to get the nav menu to right-justify, and have my logo/text logo be left justified in the same header bar. It seems I’ve seen plenty of headers set up this way, but I can’t seem to accomplish it. Surely there is a way?

Gail

Userlevel 2
Badge

@Susan Hope  - 12 more days have gone by and no one has gotten back with me on my header issues.

I have clicked around in Elementor and found some passable solutions, but still not happy with my header. The hamburger menu is still not opening up on my iPhone, even though when I test it in Responsive mode on my computer, it opens up.

If someone could at least do me the favor of running a test at www.gailsstory.com on their phone, any phone, and let me know if the menu opens up so they can navigate my site, I would appreciate it.

I checked out Elementor Experts, and when most of the people listed there say “minimum $500” and “minimum $1500”, well to just get a header fixed, it’s pretty sobering to think about spending that kind of money to get some minimal tech support.

Thanks in advance for any help offered.

Gail

Userlevel 3
Badge +2

I checked your website on my mobile and I can't open your menu either. 

However, it seems like Siteground Optimizer is preventing the dropdown from opening. Can you try to disable the combining CSS option in Siteground Optimizer, clear all cache and try your mobile menu again? 

This code is preventing your mobile dropdown from working:

@media (max-width: 767px)
.elementor-nav-menu--dropdown-mobile .elementor-nav-menu--main {
display: none;
}

And this is the source which causes it: /wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-css-e9cf2621f341472ccf25c5e49abb0ac0.css

 

Userlevel 2
Badge

@Sharon Vos Thank you so much for spotting this! I never would have found it on my own. So...next dumb question: how do I disable that? The only thing I see in SG Optimizer that’s related to what you’re talking about is in the Frontend Optimization tab, Combine CSS toggle, and it’s not letting me toggle it off. Is this what you’re referring to?

Gail

Userlevel 2
Badge

@Sharon Vos@Susan Hope  UPDATE: I just ended a call with Siteground tech support, and they said this had nothing to do with SG Optimizer. They completely disabled SG Optimizer, we cleared cache, and the menu still won’t open up. They could find no server errors or CSS rules causing this. They said this was completely caused by Elementor and needs to be fixed by Elementor.

I’m not a coder, but he said the toggle button is making this call:

<div class="elementor-menu-toggle" role="button" tabindex="0" aria-label="Menu Toggle" aria-expanded="false"> <i aria-hidden="true" role="presentation" class="eicon-menu-bar"></i><span class="elementor-screen-only">Menu</span> </div>

Someone there needs to help me fix this. Is this a bug that needs to be reported?

Gail

Userlevel 2
Badge

HELLO? Why is no one answering this? If I need to move this to the expert/bug fix area, would someone please let me know?

Elementor says I don’t need to learn one line of code to use this software, yet clearly I come up against a code issue that is preventing a basic feature from working on my site. I HAVE NO IDEA how to fix this. Would someone please help or redirect me??

Gail

Userlevel 3
Badge +2

Hi Gail,

No one is answering (yet) as this is a forum run by the community in their spare time. We are just people trying to help other people :smile:

I'm don't work for Elementor (just to clarify things haha). Elementor support is not really active here, they mostly moderate the forum. Elementor support have their own dedicated channel.

I'll try my best to help you but it's difficult to help without being able to look into your backend. Some possible other solutions:

  1. Regenerate the CSS. Go to WP admin > Elementor > Tools > Regenerate CSS. Then, you can clear the cache (from plugins and your browser cache) and refresh the page.
  2. Set the z-index of the nav menu widget to 10 (you can find the z-index in the advanced tab of the widget)


 

Userlevel 2
Badge

@Sharon Vos If Elementor support has their own dedicated channel, and I’ve been asking for help on this issue for more than a month now, then it would have been a great service to me if someone would have pointed me in that direction. When I purchased Elementor I was promised “Premium support” for 1 year, and I have yet to see it. I even have a separate post, asking if Elementor has the option of  paid support so I can get more immediate help, and I was directed to Elementor Experts. Is that what you’re referring to? There, people won’t pick up the phone for less than $1000.

Yesterday, I found someone on the outside, a programmer with no affiliation to Elementor, who spotted the problem and fixed it. Turns out it was the AMP plugin that was screwing everything up and needed to be disabled. Which made sense, because at one time the nav menu worked, and then it stopped working...right at the time that plugin was activated. Being new to blogging, WordPress and Elementor, I had no idea that AMP,  as he put it, “is not needed anymore; was a failed experiment.”

Thank you for trying to help me.

Gail

Userlevel 3
Badge +2

Happy to hear its finally solved. What I'm referring to is the Pro support found here: https://my.elementor.com/support/ (you need to log in to your Elementor account). That is how you can get in touch with Elementor directly. 

You're welcome. I'm glad it is solved. And we can only ‘fail’ forward :smile:

Just in case, did you give that person your login details? If yes, change your password for security reasons.

Userlevel 2
Badge

A thousand thanks for that link!! I have needed that and couldn’t find anything but the community forum; I’m very grateful.

For the tech support I received, a second admin user was created on my account, which I can delete as soon as I don’t need his help anymore. But I appreciate the word of caution. He was highly recommended by several members of a blogger group I’m a member of on Facebook, so I was confident in allowing this person access.

Thank you again for your help,

Gail

Reply