1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

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. AD Add tons of new icons for your Divi site. Free version available: https://divi.help/link-forums/divi-icons-pro.147/
  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.
     
  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?
     
    1. AD Feature-rich Divi eCommerce Child Theme for WooCommerce: https://divi.help/link-forums/royalcommerce.151/
  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.
     
  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?
     
    1. AD Beautify your Divi archive / category page with premade design: https://archive.diviultimate.com/
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Use similar method:
    Code:
    .et_pb_fullwidth_menu .et_pb_row {
        position: static!important;
    }
     
  7. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Perfect. thanks.
     
    1. AD Tons of premade layout & section designs + functionalities for your Divi site: https://diviultimate.com/
  8. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Hi again! Do you have any idea why this would stop working? I'm having to build a new header as the client messed up the main. I've added "!important" and made sure the ID was on the module.

    https://arthursgardendeli.com/test-for-mobile-header/



    Code:
    /*Mobile Menus full width*/
    #agd-mobile-menu-inner .et_pb_menu_inner_container {
    position: static!important;
    }
    
    .et_pb_section_1_tb_header .et_pb_column_5_tb_header {
    position: static!important;
    }
    .et_pb_fullwidth_menu .et_pb_row {
        position: static!important;
    }
    
     
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try this:
    Code:
    .et_pb_column--with-menu {
        position: static!important;
    }
     
    1. AD Custom global Divi footer (20 premade styles) + Revealing footer effect: https://footer.diviultimate.com/
  10. Marna

    Marna Member
    Divi Ultimate Header Plugin

    Thank you!!! that worked
     

Recommended Divi Hosting