Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 26, 2016 at 2:36 pm #638724
    Sunique

    Hi,

    In desktop mode I’ve designed the header with our phone number to the left and a submenu, followed by social widgets, on the right.
    My sub menu consists of WPML switcher (2 flags next to eachother).

    How ever, in mobile view it changes the layout so the 3 elements is placed on 3 different rows. I’ve just figured out how to narrow it down to 2 rows but I can’t find a solution where I can change the layout to my preferences:
    TOP ROW: Phone number to the left (50% width) | Social icons to the right (50% width)
    SECOND ROW: Submenu (my language selection)

    Please advise!
    Thank you!

    May 27, 2016 at 5:53 am #639089
    Rikard

    Hi Jimmy,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    May 27, 2016 at 10:18 am #639197
    Sunique

    Sorry about that! You can find it at: businessolutions.se

    May 27, 2016 at 10:23 am #639198
    Sunique

    Use this instead

    May 27, 2016 at 12:49 pm #639250
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px){
.responsive .phone-info {
    position: absolute;
    top: -2px;
    left: -38%;

}
#header_meta .sub_menu>ul {
    position: absolute!important;
    top: 30px;
}
#header_meta {
    min-height: 60px!important;
    }
}

    Best regards,
    Vinay

    May 27, 2016 at 3:17 pm #639317
    Sunique

    That pretty much did it, You may close the subject!
    Thank you!

    Changed some value, so my code looks like this:

    
@media only screen and (max-width: 767px){
.responsive .phone-info {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50% !important;
}

#header_meta .sub_menu>ul {
    position: absolute !important;
    top: 30px;
    width: 100%;
}
#header_meta {
    min-height: 60px !important;
    }
}
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change order of header elements i mobile view’ is closed to new replies.