Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 11, 2016 at 5:07 pm #659421
    FedeMITIC

    Hi,

    I looked through the forums but i wasn’t able to find a solution. I would like to align 2 item in the main menu on the right while the rest of the items should remain on the left. (screenshot attached below). Actually i used some media queries to force the items that I want on the right using

    @media screen and (device-width:3840px) {
    #menu-item-search {
    display:inline-block;
    margin-left:2857px;
    }
    }
    @media screen and (device-width:2560px) {
    #menu-item-search {
    display:inline-block;
    margin-left:1628px;
    }
    }
    /* FULL HD 1920 * 1080 */
    @media screen and (device-width:1920px) {
    #menu-item-search {
    display:inline-block;
    margin-left:990px;
    }
    }
    @media screen and (device-width:1600px) {
    #menu-item-search {
    display:inline-block;
    margin-left:707px;
    }
    }
    @media screen and (device-width:1440px) {
    #menu-item-search {
    display:inline-block;
    margin-left:553px;
    }
    }
    @media screen and (device-width:1366px) {
    #menu-item-search {
    display:inline-block;
    margin-left:481px;
    }
    }
    @media screen and (device-width:1280px) {
    #menu-item-search {
    display:inline-block;
    margin-left:401px;
    }
    }
    @media screen and (device-width:1024px) {
    #menu-item-search {
    display:inline-block;
    margin-left:154px;
    }
    }

    But – I don’t know how – i’m unable to target some screens or some browser, so I would like to know if there is a more clever way of doing this. Something like float:right !important; but i can’t get that to work.
    Second question: I tried to follow some of your answers to have the search item also into the mobile menu, but everything I tried didn’t work properly. Maybe you could help me also on this topic.

    July 12, 2016 at 3:01 pm #659907
    Yigit

    Hey FedeMITIC,

    Please use following code instead

    .html_header_top #top .av_menu_left .main_menu, .avia-menu.av-main-nav-wrap {
    width: 100%;
}
#top #menu-item-search, .av-language-switch-item {
    float: right!important;
}

    Then please refer to this post – https://kriesi.at/support/topic/search-icon-on-mobile-devices/#post-589759

    Best regards,
    Yigit

    July 14, 2016 at 1:57 pm #660848
    FedeMITIC

    Hi Yigit,

    As usual thank you very much. The code provided seems to work properly.
    Unfortunately I didn’t have the time to check the link you provided, so I will check that later.

    About the menu elements, now they *correctly* align on the right, but I would like to know if it’s possible to have the language switcher *after* the search box and not *before*.like in my old screenshot.

    Thank you again,

    Federico

    July 18, 2016 at 3:31 pm #662053
    Andy

    Hi,

    try this code:

    #menu-item-search {
right: 65px;
}
.av-language-switch-item {
right: -230px;
}

    and adjust as needed.

    Best regards,
    Andy

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