Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 20, 2014 at 1:02 pm #212188
    CloudChoice

    Hi,

    In small devices (cell phone or tablets) the secondary menu line goes down to the social icons line.

    How can i keep the social icons and the secondary menu in the same line like in computer devices?

    Thanks

    January 20, 2014 at 6:32 pm #212369
    Ismael

    Hey CloudChoice!

    You can add this on Quick CSS:

    @media only screen and (max-width: 767px) {
.responsive #header .social_bookmarks {
position: absolute;
left: 0;
}

.responsive #header .sub_menu.sub_menu>ul {
position: relative;
right: 0;
}
}

    Regards,
    Ismael

    January 20, 2014 at 9:14 pm #212426
    CloudChoice

    Hi,

    Thanks for the fast answer. The problem of same line was resolved, the two menus are in the same line.

    But are overlapped. I tried some changes in the code using something like that:

    @media only screen and (max-width: 767px) {
    .social_bookmarks {
    position: absolute;
    left: -100px;
    }

    .responsive #header {
    position: absolute;
    left: 100px;
    }

    .responsive #header .sub_menu.sub_menu>ul {
    position: relative;
    right: 0;
    }
    }

    But no changes in the position of secondary menu. I tring to put the social icons in the left side and the secondary menu in the right side of course that both in the same line.

    Have you any suggestions?

    Thanks

    January 21, 2014 at 5:09 am #212619
    Ismael

    Hey!

    Please post the link to the website. We would like to inspect it.

    Best regards,
    Ismael

    January 21, 2014 at 2:07 pm #212763
    CloudChoice
    This reply has been marked as private.
    January 21, 2014 at 8:09 pm #212933
    CloudChoice

    Hi,

    I tried some variations but was not successful, do you have any idea?

    January 22, 2014 at 2:03 am #213113
    Ismael

    Hey!

    Please use this:

    @media only screen and (max-width: 767px) {
.responsive #header .social_bookmarks {
position: absolute;
left: -100px;
}

.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
position: relative;
right: -20px;
}

#header_meta .container {
margin-bottom: 20px;
}
}

    Cheers!
    Ismael

    January 22, 2014 at 2:17 am #213119
    CloudChoice

    Hi,

    Thanks. But not work.

    There is a little overlap and now the links in secondary menu not working too.

    I left the code to be possible to see the result.

    Thanks

    January 22, 2014 at 12:07 pm #213260
    Ismael

    Hey!

    Please use this instead:

    @media only screen and (max-width: 767px) {
.responsive #header .social_bookmarks {
position: absolute;
left: -60px;
width: 50%;
}

.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
width: 75%;
position: relative;
right: -70px;
}

#menu-item-6214 a {
position: relative !important;
top: 0px !important;
}
}

    The header should look like this after:

    Best regards,
    Ismael

    January 22, 2014 at 7:42 pm #213494
    CloudChoice

    Hi,

    Thanks. I did some changes because the relative value is not accept in android dispositives changing the same for absolute and with little customizations. The code was something like that:

    @media only screen and (max-width: 767px) and (min-width: 480px) {
    .responsive #header .social_bookmarks {
    position: absolute;
    left: -55px;
    width: 50%;
    }

    .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
    width: 100%;
    position: absolute;
    right: -59px;
    top: 0px !important;
    }

    .responsive #menu-item-6214 a {
    position: relative !important;
    top: 0px !important;
    }

    }

    THANK YOU. GOOD JOB!

    January 23, 2014 at 4:04 am #213667
    Ismael

    Hey!

    Glad it is fixed. :)

    Regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Social Icons in same line that secondary menu’ is closed to new replies.