Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • August 9, 2015 at 10:06 pm #484940
    ACNLatitudes

    Hello. The following code works great for increasing the size of the search icon on the desktop version of our site, but it messes up the mobile version of our site. Can you please advise what needs to be done, so that this code does not impact the mobile version?

    /*Increases the size of the search icon in header area*/
    .html_bottom_nav_header #top #menu-item-search>a {
    padding-right: 0;
    font-size: 22px !important;
    }

    Thanks!

    August 9, 2015 at 10:30 pm #484947
    Basilis

    Hey ACNLatitudes!

    You would need some media queries to play with, so you can fix the size of the element.
    More informations on how to use it and how to target different positions can be found here:
    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Regards,
    Basilis

    August 9, 2015 at 11:21 pm #484975
    ACNLatitudes

    Is there any other option (perhaps some different CSS code) that I can use to just enlarge the search icon on the desktop version of the site without needing to learn about all those different media queries?

    I tried using one of those media queries already and was unsuccessful.

    August 10, 2015 at 12:42 pm #485236
    Yigit

    Hi!

    Please use the code as following 

    /*Increases the size of the search icon in header area*/
@media only screen and (min-width: 990px) {
.html_bottom_nav_header #top #menu-item-search>a {
padding-right: 0;
font-size: 22px !important;
}}

    Cheers!
    Yigit

    August 12, 2015 at 5:56 pm #486708
    ACNLatitudes

    Thanks. I tried that, but it had no impact on the search icon (it is still small). Please advise.

    August 13, 2015 at 8:11 am #486989
    Rikard

    Hi,

    Please try the following instead:

    @media only screen and (max-width: 990px) {
#menu-item-search a {
font-size:22px !important;
}
}

    Best regards,
    Rikard

    August 13, 2015 at 3:49 pm #487259
    ACNLatitudes

    I tried that and it still isn’t working. I’m posting my login info in case you want to take a look to see what is going on. Thanks!

    August 14, 2015 at 6:58 am #487562
    Rikard

    Hi,

    It’s working but one of your other modifications is overriding unfortunately: 

    @media only screen and (max-width: 1110px) {
#top #header .av-main-nav > li > a {
  font-size: 11px !important;
}
}

    So I changed it to this and commented out your old code:

    @media only screen and (max-width: 1110px) {
#avia-menu li a span.avia-menu-text {
font-size:11px !important;
}
}

    Regards,
    Rikard

    August 22, 2015 at 5:10 pm #491737
    ACNLatitudes

    Thanks. I took a look at the site. The search icon is big when I resize my browser down to a much smaller size, but the search icon is still small when the browser is shown at a normal or wiser size. Please advise.

    August 25, 2015 at 4:44 am #492591
    Rikard

    Hi,

    If you want the same size for larger screens as well then just remove the media query: 

    #top #header .av-main-nav > li > a {
  font-size: 11px !important;
}

    Best regards,
    Rikard

    September 12, 2015 at 5:05 am #501951
    ACNLatitudes

    Thanks for the reply, but I don’t fully understand your response. The code you are referencing appears to be the same code that you commented out. If I un-comment that code and remove the media query, then the search icon looks small on all screen sizes.

    Please clarify what I need to do in order to have the search icon big (to look the same size as it currently looks on “non-mobile” smaller screens.

    Thanks.

    September 12, 2015 at 9:58 am #502034
    Rikard

    Hi,

    Try adding the following before the media queries: 

    #avia-menu li a span.avia-menu-text {
font-size:20px !important;
}

    Thanks,
    Rikard

    October 11, 2015 at 6:14 pm #516997
    ACNLatitudes

    I was able to accomplish what I needed by simply increasing the max-width to 2000px as shown below.

    /*Increases the size of the search icon in header area*/
    @media only screen and (max-width: 2000px) {
    #menu-item-search a {
    font-size: 22px !important;
    }
    }

    You can close out this ticket. Thanks!

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Increasing the Size of the Search Icon on Desktop Version of Site’ is closed to new replies.