Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 18, 2014 at 7:14 am #337638
    marjan2k

    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!

    October 20, 2014 at 8:33 am #338179
    Ismael

    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

    October 20, 2014 at 4:58 pm #338455
    marjan2k

    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

    October 20, 2014 at 5:10 pm #338461
    Yigit

    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

    October 20, 2014 at 6:15 pm #338521
    marjan2k

    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?

    October 21, 2014 at 12:33 am #338774
    Yigit

    Hey!

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

    Cheers!
    Yigit

    October 21, 2014 at 1:15 am #338792
    marjan2k

    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

    October 21, 2014 at 6:58 pm #339194
    Yigit

    Hey!

    You can try adding this code and see how it looks

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

    Cheers!
    Yigit

    October 21, 2014 at 8:35 pm #339228
    marjan2k

    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;}
    October 23, 2014 at 12:24 am #339839
    Ismael

    Hey!

    Thank you for the update.

    You can use this:

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

    Cheers!
    Ismael

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