1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
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. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Can I drop my Menu bar to the bottom of Home Page?

Discussion in 'Free Divi Community Forum' started by Andrew Edmond, May 7, 2020.

  1. Andrew Edmond

    Andrew Edmond Member

    Hi All,

    I am starting a new project and have been asked to have the Menu Bar at the bottom of Home Page, similar to https://www.instagram.com/

    This is a single page website and from the bottom Menu Bar, I then want my links to be anchor links and scroll down to the relevant sections.

    Can this be done with Divi?

    Many thanks in advance
     
    #1 Andrew Edmond, May 7, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    #2 Divi.Help, May 7, 2020
  3. Andrew Edmond

    Andrew Edmond Member

    #3 Andrew Edmond, May 13, 2020
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    To make your header stick to the bottom of the screen, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #4 Divi.Help, May 13, 2020
  5. Andrew Edmond

    Andrew Edmond Member

    Hi,

    Thank you for your help.

    This has bought the Menu Bar to the bottom but now when I enable Visual Builder to make changes to my site I can not use options in all the modules. Can you help?
     
    #5 Andrew Edmond, May 13, 2020
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    If you don't wish to code to affect your visual builder, then try the below CSS instead:
    Code:
    Log In or Sign Up to view this code.
     
    #6 Divi.Help, May 13, 2020
  7. Andrew Edmond

    Andrew Edmond Member

    Hi,

    You have been amazing with you knowledge and helping me. I really need to learn coding.

    Can you answer me one more thing, with the Menu Bar at the bottom can I have the bar hidden until I start scrolling down as in the https://www.instagram.com/ page?

    Thank you in advance

    PS - I have been told that thanks to Divi I do not need to learn HTML, CSS, and Javascript but I feel a bit of a cheat. Do you recommend any Udemy courses to help me?
     
    #7 Andrew Edmond, May 14, 2020
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    I didn't see such menu in instagram.

    But you may try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    **Adjust -66px to the height of your header.
    For normal use, the existing options should be sufficient to use without coding knowledge.

    But for more advanced design, might require some CSS & JS.

    For the bottom menu bar that you mentioned, it can actually be made using the default options. You will need to create a new custom global header in WP Admin > Divi > Theme Builder. Add a new section + menu module. Then set the Section settings > Advanced > Position to be Fixed & set it to be bottom & set a larger z-index. But to make it show on scroll, that would need custom JS.

    As for the courses, I don't have any suggestions on that.

    You may try to ask in this Divi Facebook Group: https://www.facebook.com/groups/DiviThemeUsers/
    Or official Divi support at: https://www.elegantthemes.com/members-area/help/
     
    #8 Divi.Help, May 14, 2020
  9. Andrew Edmond

    Andrew Edmond Member



    Hi,

    Thank you so much for your help. I have the Desktop and mobile responsive version setup just as I want on Divi but when I just checked with my mobile phone, the layout is all over the place.

    https://clara.world

    Please check and tell me if you have any suggestions
     
    #9 Andrew Edmond, May 14, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    By default in mobile, it turns into hamburger menu style.

    But if you wish it to be the same as desktop menu, then try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #10 Divi.Help, May 15, 2020
  11. Andrew Edmond

    Andrew Edmond Member

    Thank you so much.

    Can you tell me why on my desktop and my mobile setup is just as I want my site to look on Divi but when I check on my Iphone the sizing and spacing is all over the place. How do I correct this?
     
    #11 Andrew Edmond, May 15, 2020
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  12. Divi.Help

    Divi.Help Administrator
    Staff Member

    Are you referring to the Google Play & App Store button?

    It seems like the Google Play button is set to be hidden in mobile & tablet. Easiest way to fix it is to delete the google play button module & clone the app store button module & replace the image with google play & set the margin left to be lesser.

    =======

    For normal case, I would not recommend to use negative margin to adjust the position. It might cause undesirable outcome in mobile & tablet. Normally, will just adjust the padding for the row / section to move the modules in it.

    Normally, the negative margin is used to get overlap effect design.
     
    #12 Divi.Help, May 16, 2020
  13. Andrew Edmond

    Andrew Edmond Member

    Thank you.

    So how do I add 2 buttons next each other without using negative margins?

    The Button Module only allows to be placed below each other so the bottom one has to be moved above to be inline.
     
    #13 Andrew Edmond, May 17, 2020
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  14. Divi.Help

    Divi.Help Administrator
    Staff Member

    Check out this tutorial: https://divinotes.com/place-divi-button-modules-next-column/
     
    #14 Divi.Help, May 17, 2020
  15. Andrew Edmond

    Andrew Edmond Member

    Thank you once again.

    Is there anyway I can promote your site or are you content with the traffic you get?
     
    #15 Andrew Edmond, May 18, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  16. Divi.Help

    Divi.Help Administrator
    Staff Member

    It's all up to you. We're all good. :)
     
    #16 Divi.Help, May 18, 2020
(You must log in or sign up to post here.)