Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #638724

    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!

    #639089

    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

    #639197

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

    #639198

    Use this instead

    #639250

    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

    #639317

    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;
        }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change order of header elements i mobile view’ is closed to new replies.