Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #232370

    I’m working on a client’s website (www.headmenco.com). I wanted to know how can I get the footer menu items to display as block elements and be stacked in the mobile phone versions. The footer disappears in the portrait iPhone view (http://awesomescreenshot.com/0802fvu3a9) and the menu doesn’t looks so great in the landscape view (http://awesomescreenshot.com/0252fvukea). Please advise. Thanks.

    #232374

    Hi mrtechnique!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 479px) {
    .responsive #socket .sub_menu_socket {
    display: block;
    }}
    @media only screen and (max-width: 767px) {
    #socket .sub_menu_socket li {
    padding: 0 5px; }}

    Regards,
    Yigit

    #232385

    Thanks for the super quick response. I added the code to a child theme. The footer menu shows up in the 320px width responsive version, but the menu items still aren’t block level elements. Also, I’d like to increase the size of the footer menu items in the mobile phone versions. Please advise.

    #232578

    Hey!

    Thank you for using the theme. I hope you’re doing well today.

    Please add this on the child theme’s style.css:

    @media only screen and (max-width: 767px) {
    .responsive #socket .sub_menu_socket ul li {
    padding: 10px;
    font-size: 15px;
    }
    }

    Please post a screenshot of what you want your footer socket to look like.

    Regards,
    Ismael

    #232699

    Thanks for the help. This is the code I used just in case anyone ever has a problem similar to mine:

    @media only screen and (max-width: 479px) {
    .responsive #socket .sub_menu_socket {
    display: block !important;
    width: 100%;
    }
    
    .responsive #socket .sub_menu_socket ul li {
    float: none;
    border-left: none;
    text-align: center;
    }
    
    }
    
    @media only screen and (max-width: 767px) {
    .responsive #socket .sub_menu_socket ul li {
    padding: 10px;
    font-size: 15px;
    }
    }
Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Footer Menu Display Issue on Mobile Version’ is closed to new replies.