Main Site Menu -- thin gap after removing top bar + drop down menu jank

[Anandashri]

Anyone out there who can give me an idea of what to do to solve these problems with my main site menu (sticky menu)?

There's a thin gap of space above the main site header/menu bar at the very top of the page It's very thin and only noticeable when scrolling, more noticeable in mobile version.
It appeared suddenly when I deleted the top most bar in the original design. I've been trying various things to remedy it, but haven't succeeded.

The drop down menu under services suddenly stopped appearing normally. Seems like it's being cut off somehow. Also The links to the specific places on the pages are not working.

 

[sms-design]

Could you help us with some more information about version of

• wordpress
• elementor free/pro
• widgets
• plugins
• themes
• Web browser
• OS mac/pc/linux

Screenshot or site url which you can add like this **mywebsite.com/mypage may help people answer your questions.

 

[Anandashri]

This is the temporary URL where the site is being hosted now. h.ttp://karif.sg-host.com/

I use Elementor Pro with ultimate add ons.
The theme is a child of Astra theme that a designer created (and then she went missing)
The problem appears on all browsers and devices.

Thanks for your help

 

[Koni Kodes]

When you removed the top bar and dropdown, did move the sticky to top:0?
To replace the top bar...

 

[Anandashri]

Thanks for your reply,
When I select the main site title section, Elementor gives me these options for margin and padding:: - see screen shot attached.
They appear first as blank, but when I edit them they appear all as 0, as you can see.
Is this the correct way to edit the top margin of the sticky header?

 

[Koni Kodes]

Yes, this is correct. I see this is for the section. What does the actual header within the section look like when you edit it? Does it have extra padding?

 

[Anandashri]

When I add padding and margin it widens the appearance of the main site header and adds extra space around it -- but when I scroll down the page, the sticky header takes over and the narrow gap at the top of the site returns.
The first screen shot shows what happens when I increased the margin number to +5,
The second screen shot shows what happens when I begin to scroll down.
Suddenly, above the sticky header you can see some of the background image and content scrolling by.
Thank you for your help

 

[Anandashri]

Perhaps Elementor just does't support a main-site sticky menu design without a top bar
And I can't find an option to put the top bar back in now. Where would it be?

 

[Koni Kodes]

You should be able to set Offset to 0, and make this work to look how you want it to be.
I'm using the Nav Menu widget on my Hello Theme.
But I would think that the Title -> Advanced Tab - > Motion Effects would be what you are looking for.

 

[Anandashri]

Koni,
THANK YOU! THANK YOU! That fixed it!! Wow you're a big help!

Now I just need a little help with the drop down menu.
See attached image: Under "services" the drop down menu is being cut off somehow. Could you direct me in how to fix this? Is it through WP theme or Elementor? attatched 2 screenshots of the back end editing options from both.. but neither seem to offer a solution to the problem.

Also the links to the specific places on the pages are not working and I can't figure out where to edit them.
Thanks again,
Kari

 

[Koni Kodes]

Looks good on mobile

Looks a little tight - but still good on tablet

It looks like the desk top is the one you need to play with. It only has an index of 3. So it is sliding behind the image below the navbar. Try to go to Advance Tab and set the Z-index to 150.

 

[Anandashri]

I went to the advanced tab of Nav menu and changed the z-index to 150. But it seemed to have no effect on the desktop problem.

 

[Koni Kodes]

Oh rats. Let me see something else...
When I looked at the dropdown, the z-index was still 3.
It looks like your background-overlay is in the way. But I am not sure how to fix that.

If you can find that background-overlay, try to make the index -10, or postion 2em from the top, relative, then it may work.

Otherwise, I can only suggest that you ask in Elementor Community on Facebook. I'm sorry.