By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

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

Anandashri

Anandashri

New Member
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.
 
elementor official
sms-design

sms-design

Member
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.
 
elementor official
Anandashri

Anandashri

New Member
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
 
elementor official
Koni Kodes

Koni Kodes

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

Anandashri

New Member
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?
 
elementor official

Attachments

Koni Kodes

Koni Kodes

Member
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?
 
elementor official
Anandashri

Anandashri

New Member
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
 
elementor official

Attachments

Anandashri

Anandashri

New Member
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?
 
elementor official
Koni Kodes

Koni Kodes

Member
1582144410269.png

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.
 
elementor official
Anandashri

Anandashri

New Member
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
 
elementor official

Attachments

Koni Kodes

Koni Kodes

Member
1582155205559.png

Looks good on mobile

1582155256249.png

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.
 
elementor official
Koni Kodes

Koni Kodes

Member
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.
1582162382629.png

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.
 
elementor official
Last edited:

Latest posts

Other Elementor Resources

elementor official
elementor official
Top