Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • September 8, 2014 at 11:28 pm #315400
    davisar

    Hello,

    I added search to the mobile menu as described on another page using the following css.

    Everything works great except on phones, the search box is partially cut-off. How can I fix this by either making the box smaller or centering the box?

    Thank you.

    CSS:

    /* Mobile Search */
    @media only screen and (max-width: 767px) {
    .html_mobile_menu_tablet .main_menu, .html_mobile_menu_tablet #header_main_alternate, .responsive #header .main_menu ul, #top #menu-item-search { display: block; }
    }

    @media only screen and (max-width: 767px) {
    .html_mobile_menu_phone .main_menu, .html_mobile_menu_phone #header_main_alternate, .responsive #header .main_menu ul, #top #menu-item-search { display: block; }
    .av-main-nav li { display: none; }}

    @media only screen and (max-width: 767px) {
    nav.main_menu { float: right; margin-right: 70px; }}

    @media only screen and (max-width: 767px) {
    nav.main_menu { margin-right: 70px !important; }}
    /* End Mobile Search */

    September 10, 2014 at 3:54 am #316232
    Devin

    Hey davisar!

    Try:

    
@media only screen and (max-width: 479px) {
.avia-search-tooltip.avia-tt {
    margin-left: -47px;
}
span.avia-arrow-wrap {
    display: none;
}
}

    Best regards,
    Devin

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