Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • November 24, 2017 at 3:50 pm #881248
    elames

    This site: https://kau-hawaii.com
    I only want the menu to extend 80% of the screen. It looks fine on desktop but on laptop and tablet in horizontal position it looks like this image

    https://imgur.com/a/OK4jC

    The menu moves to a second line. How can I adjust this to all one line of menu?
    Thank you in advance,

    • This topic was modified 6 years, 12 months ago by elames.
    November 24, 2017 at 4:34 pm #881290
    Nikko

    Hey elames,

    I think reducing the fonts wouldn’t be enough, probably make some of it submenu. Otherwise I would suggest setting Menu Items for Desktop “display as icon”.

    Best regards,
    Nikko

    November 24, 2017 at 5:46 pm #881339
    elames

    No sorry that won’t work. Client does not want icons. I think it has to do with setting up a media query but I am not sure which it would be.

    November 24, 2017 at 7:00 pm #881369
    Jordan Shannon

    Hi,

    Add this to quick css:

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

    Best regards,
    Jordan Shannon

    November 24, 2017 at 7:54 pm #881395
    elames

    Sorry this code did nothing. Still wraps to second line

    November 24, 2017 at 8:17 pm #881397
    Jordan Shannon

    Hi,

    Please provide admin info so we can login and look into this issue further?

    Best regards,
    Jordan Shannon

    November 24, 2017 at 8:25 pm #881400
    elames
    This reply has been marked as private.
    November 24, 2017 at 9:40 pm #881408
    Jordan Shannon

    Hi,

    Add this to quick css:

    @media only screen and (max-width: 1680px) and (min-width: 1630px)  {

.avia-menu-text{
font-size:14px!important;
}

}

@media only screen and (max-width: 1630px) and (min-width: 1437px)  {

.avia-menu-text{
font-size:12px!important;
}

}


@media only screen and (max-width: 1437px) and (min-width: 1245px)  {

.avia-menu-text{
font-size:10px!important;
}

}

@media only screen and (max-width: 1245px) and (min-width: 1051px)  {

.avia-menu-text{
font-size:8px!important;
}

}



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

.avia-menu-text{
font-size:7px!important;
}

}

    Best regards,
    Jordan Shannon

    November 24, 2017 at 10:20 pm #881413
    elames
    This reply has been marked as private.
    November 25, 2017 at 12:30 am #881433
    Jordan Shannon

    Hi,

    The site looks a bit different than what I was originally seeing. The following should work:

    @media only screen and (max-width: 1137px) and (min-width: 990px)  {
.avia-menu-text{
font-size:13px!important;
}}

    Best regards,
    Jordan Shannon

    November 25, 2017 at 1:08 am #881450
    elames
    This reply has been marked as private.
    November 25, 2017 at 5:14 am #881478
    elames
    This reply has been marked as private.
    November 25, 2017 at 5:35 pm #881679
    Mike

    Hi,
    It looks as though the only change that you now need is the border radius, Try this code in the General Styling > Quick CSS field:

    #menu-item-6904 a {
border-top-right-radius: 5px!important; 
    border-bottom-right-radius: 5px!important; 
}
#menu-item-5236 a {
border-top-left-radius: 5px!important; 
    border-bottom-left-radius: 5px!important; 
}

    Please clear your cache and any caching plugin on your site.

    Best regards,
    Mike

    November 25, 2017 at 7:07 pm #881698
    elames
    This reply has been marked as private.
    November 25, 2017 at 8:14 pm #881734
    Victoria

    Hi elames,

    Glad Mike could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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