Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 3, 2021 at 1:02 am #1303669
    navindesigns

    In my extra elements section at the very top of my site, I have set up “Header Phone Number/Extra Info” on the top right and “Header Secondary Menu” on the top left. It looks great on desktop but on mobile, I would l like to two of them to be on one line like the desktop version (align left and align right) instead of stacking on top of each other

    my site – https://baamgrf.com/

    Thanks

    June 4, 2021 at 1:10 pm #1304018
    Rikard

    Hey navindesigns,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
#header_meta nav.sub_menu, #header_meta .phone-info {
    display: inline-block;
    width: auto;
}
}

    Best regards,
    Rikard

    June 4, 2021 at 2:25 pm #1304039
    navindesigns

    I applied it but it still does not align properly.

    screenshot – https://ibb.co/DQ9RZn6

    • This reply was modified 3 years, 6 months ago by navindesigns.
    June 4, 2021 at 4:12 pm #1304094
    Nikko

    Hi navindesigns,

    Can you try adding this CSS code:

    .responsive #header_meta .sub_menu>ul>li {
    padding: 0 16px 0 0;
}

    just below this code that Rikard provided:

    @media only screen and (max-width: 767px) {

    Hope it helps.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.