Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 4, 2014 at 7:13 pm #232370
    mrtechnique

    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.

    March 4, 2014 at 7:16 pm #232374
    Yigit

    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

    March 4, 2014 at 7:28 pm #232385
    mrtechnique

    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.

    March 5, 2014 at 8:20 am #232578
    Ismael

    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

    March 5, 2014 at 2:49 pm #232699
    mrtechnique

    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;
}
}
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Footer Menu Display Issue on Mobile Version’ is closed to new replies.