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 Making Mobile Menus Full Width

Discussion in 'Free Divi Community Forum' started by Marna, Jun 26, 2020.

  1. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Hi.

    I have two menus that I need to make fill the screen when the hamburger icon is pressed. Each has different circumstances...

    The MAIN menu is built using the theme builder. The mobile version has CSS on the row to make it display as a 3-row column instead of stacked. So that means the menu is expanding only column width. I added an ID to that menu module and width CSS but it didn't work.

    The FOOD menu is a full-width module. It expands maybe 90%. The client wants it to be the full screen. Again, Added an ID to this and tried adding 100% width with no luck. I believe both the column and the module are set to 0 L/R margins and padding and 100% sizing

    Two screenshots attached.
    http://arthursgd.stahrstaging2.com/sandwiches/
     

    Attached Files:

    #1 Marna, Jun 26, 2020
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  2. Problemizer.com

    Problemizer.com Divi Expert

    You should start by looking here. http://prntscr.com/t76vs1
    You put left: 0; position: absolute; and first relative parent is hamburger menu icon which is on the right. You can't expect width to ever be 100% with that setting.
     
    #2 Problemizer.com, Jun 26, 2020
  3. Marna

    Marna Member
    Divi Ultimate Header Plugin

    I'm not sure what it is that you are saying. Is it that I just can't do it or that I need to set it to the right?
     
    #3 Marna, Jun 26, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  4. Problemizer.com

    Problemizer.com Divi Expert

    Can you try to add this custom CSS:
    #agd-mobile-menu-inner .et_pb_menu_inner_container {
    position: static;
    }

    .et_pb_section_1_tb_header .et_pb_column_5_tb_header {
    position: static;
    }

    It is no the best solution but it should work.
     
    #4 Problemizer.com, Jun 26, 2020
  5. Marna

    Marna Member
    Divi Ultimate Header Plugin


    Wow, that worked great. so for the second menu, how can i get that to be full size?
     
    #5 Marna, Jun 26, 2020
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Use similar method:
    Code:
    Log In or Sign Up to view this code.
     
    #6 Divi.Help, Jun 27, 2020
  7. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Perfect. thanks.
     
    #7 Marna, Jun 27, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  8. Marna

    Marna Member
    Divi Ultimate Header Plugin

    #8 Marna, Jul 31, 2020
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    #9 Divi.Help, Aug 1, 2020
    1. PRO MEMBER PERKS Divi.Help Header AI Generator - Try the power of AI to generate a custom Divi header for you:Try Now
  10. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Thank you!!! that worked
     
    #10 Marna, Aug 1, 2020
(You must log in or sign up to post here.)