Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #337638

    Hi,

    This is my website. As you can see the logo and menu are overlapping are overlapping at the moment.
    Can you please do something so that the menu font gets smaller as the width gets lower than 1405px?
    I am looking at the website here, this is using enfold theme as well. Observe how the font changes with varying the screen size.

    Thanks!

    #338179

    Hey marjan2k!

    Thank you for using Enfold.

    Please use this on Quick CSS or custom.css to adjust the size of the menu items:

    @media only screen and (max-width: 1410px) {
    .av-main-nav>li>a {
    padding: 0 8px;
    font-size: 12px;
    }
    }

    Best regards,
    Ismael

    #338455

    Hi Ismael,

    The problem still persists even after adding those stuff to quick css.

    As you can see from the picture even the social media buttons start going wrong at one point.
    It changes to mobile/tablet view from 900px but these problems are within 900px-1405px

    And of course, Enfold is the best theme I have ever used and I have no regrets for using it, you guys are simply awesome!

    Regards,
    Marjan

    #338461

    Hi Marjan!

    Please try adding following code to Quick CSS as well

    .av-main-nav>li>a { padding: 0 5px; }

    but that still may not be helpful as you have many menu items and displaying social icons next to your menu items.
    P.S.: please disable CSS minifying feature before applying the code

    Cheers!
    Yigit

    #338521

    Ok I did as you suggested and it works quite well, not perfect but good enough. Let’s just assume people don’t have low resolution screens :P

    Now that the menu headers are close to each other, its kind of hard to differentiate between the headers. Is there a way we can add borders to each header so that they can be differentiated?

    #338774

    Hey!

    It is possible but it would increase the space between menu items and would go back to first issue unfortunately

    Cheers!
    Yigit

    #338792

    Hi Yigit,

    Isn’t there just a simple box border CSS for menu items? If it goes back to the previous format that is even worse !_!

    Regards,
    Marjan

    #339194

    Hey!

    You can try adding this code and see how it looks

    .av-main-nav > li {
    border-left: 1px solid #e2e2e2;
    }

    Cheers!
    Yigit

    #339228

    Hi Yigit,

    I slightly modified your codes. Now it doesn’t break it. But I want to decrease the space between the right border (so that it has same space as the left border) for Contact Us.

    @media only screen and (max-width: 1410px) {
    .av-main-nav>li>a {
    padding: 0 8px;
    font-size: 12px;
    }
    }
    .av-main-nav>li>a { padding: 0 5px; 
    border-left:1px;
    border-style:solid;
    border-color:#ededed;}
    #339839

    Hey!

    Thank you for the update.

    You can use this:

    .avia-menu.av_menu_icon_beside {
    padding-right: 5px;
    margin-right: 25px;
    }

    Cheers!
    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.