1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Extra or overlapped space appearing between website's menu bar and sections

Discussion in 'Free Divi Community Forum' started by andalltha, Jan 10, 2024.

  1. andalltha

    andalltha Member

    Hello there!

    I created this website with Divi: https://couragebxl.be/. When I click on menu's items, sometimes a white space appears between the menu bar and the target section, sometimes the menu bar is overlapping the section's top, depending on the screen size. The extra space and the overlapped one look like they have the same height than the section's one. How can I fix this?

    Thank you very much in advance.
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may check this out & see if it works: https://divi.help/threads/offset-anchor-link.6937/#post-22392

    You will need to change the below:

    var headerHeight = 143;

    into

    var headerHeight = 83;
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  3. andalltha

    andalltha Member

    Thank you very much! Looks like it works but only on desktop. There's still a gap appearing on mobile...
     
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Your header height is 94px. So you should use var headerHeight = 94;
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  5. andalltha

    andalltha Member

    Thank you very much. I tried different ways to use var headerHeight = 83; on desktop and var headerHeight = 94; on mobile but nothing works. Do you know a way to achieve it?
     
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    I checked your site on my iPhone & the anchor link seems to work just fine.
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
  7. andalltha

    andalltha Member

    Great, thanks again!