Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 25, 2015 at 6:14 pm #385141
    codecreative

    Hi I’ve tried various css and can’t seem to get the height of my navigation menu items div to reduce by 50% so it is almost floating in the middle of the header area

    If you look at http://79.170.40.239/supplyonlykitchens.co.uk/

    I think if we can reduce the area where the nav menu text is by half it would look amazing. The border lines would be reduced and emphasis on the purple highlight under menu items would be more visible

    Can you advise what I should reduce? I tried this

    but it has no impact

    .main_menu, .avia-menu {height:50%!important;}

    January 26, 2015 at 11:47 am #385350
    codecreative

    Hi

    I’ve managed to successfully achieve my initial aim of reducing the nav text, at http://79.170.40.239/supplyonlykitchens.co.uk/

    My challenge now is when I scroll down I want the text to reduce but it is not doing. I’ve performed the following css to achieve its current look,

    .av-main-nav > li > a {
    font-weight: 300!important;
    text-transform: uppercase!important;
    font-family: Roboto Condensed!important;
    font-style: normal!important;
    font-weight: 300!important;
    height: 58px!important;
    line-height: 58px!important;
    }

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

    .av-main-nav > li:first-child {
    border: medium none;
    }

    .av-main-nav > li:last-child {
    border-left: medium none;
    }

    .main_menu, .avia-menu {height:50%!important;
    }
    .main_menu {margin-top:29px!important;}

    Have you any idea what I did wrong to prevent it squeezing down?

    January 26, 2015 at 12:19 pm #385378
    codecreative

    Okay I think I’ve cracked it. When I remove the line of css
    .main_menu {margin-top:29px;}

    The menu item is flush to the top of its container div. And as you scroll down it works and looks fine and sits within its div. But I want to have
    .main_menu {margin-top:29px;}

    On the div in the normal view of the website when sticky is not activated. So to make this work I need to apply this css inline

    .main_menu {margin-top:0!important;}

    When sticky is activated. I can already see that inline css gets applied to the logo as we scroll down and sticky is activated. So my question is what theme file, I’m assuming a php theme file do I need to edit to apply the margin top 0 css to the main menu div? I’m assuming it is the same file that changes

    <div class=”container” style=”height: 116px; line-height: 116px;”>

    TO

    <div class=”container” style=”height: 58px; line-height: 58px;”>

    January 26, 2015 at 3:42 pm #385488
    Yigit

    Hi!

    Please add following code to Quick CSS 

    .header-scrolled nav.main_menu {
margin-top: 0;
}

    Regards,
    Yigit

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