Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 3, 2015 at 2:18 pm #546407
    gsestini

    Please I’m having trouble with my header. I want to do something like this website http://www.manrollo.com they are also using enfold.

    After inserting several CSS codes that I run trough here on the forums.

    .header_color .main_menu ul:first-child > li > a { color: gray; font-weight: 100; font-family: ‘PT Sans’; }
    .header_color .main_menu ul:first-child > li > a:hover { color: gray; }
    .header_color .main_menu ul:first-child > li.current_page_item > a { color: gray; }
    .layerslider-open-sans {
    font-family: ‘Open Sans’ !important;
    }
    #header .avia_mega_div { center: -500%; }
    }
    .sub_menu>ul>li>a, .sub_menu>div>ul>li>a {
    font-size: 40px;
    }
    .main_menu {
    center: 300px;
    }
    #header_main {
    background: #ebebeb;
    background: -moz-linear-gradient(top, #ebebeb 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #ebebeb 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #ebebeb 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #ebebeb 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #ebebeb 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ebebeb’, endColorstr=’#ffffff’,GradientType=0 );
    }
    @media only screen and (max-width: 1350px) {
    .av-main-nav > li > a {
    padding: 0 8px;
    font-size: 16px;
    }

    My page is now like this http://www.mancruiser.com.br/wordpress

    The problem is that when I shrink the screen the Main Menu runs over the logo and I would like it to disappear before it runs trough the logo but without having to use a small menu bar I want it with 21px.

    Please help.

    December 3, 2015 at 2:32 pm #546416
    Yigit

    Hi Giuliano!

    Please refer to this post – http://kriesi.at/documentation/enfold/menu-overlaps-logo-on-tablets/ if that does not help, see – http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

    Cheers!
    Yigit

    December 3, 2015 at 3:32 pm #546456
    gsestini

    I received your email and tried the codes i found but my page…

    December 3, 2015 at 3:33 pm #546458
    gsestini

    My page still have the menu running over the logo….is it normal…the menu goes off but only after running a little bit over the logo.

    My CSS Quick Codes are like this:

    .header_color .main_menu ul:first-child > li > a { color: gray; font-weight: 100; font-family: ‘PT Sans’; }
    .header_color .main_menu ul:first-child > li > a:hover { color: gray; }
    .header_color .main_menu ul:first-child > li.current_page_item > a { color: gray; }
    .layerslider-open-sans {
    font-family: ‘Open Sans’ !important;
    }
    #header .avia_mega_div { center: -500%; }
    }
    .sub_menu>ul>li>a, .sub_menu>div>ul>li>a {
    font-size: 40px;
    }
    .main_menu {
    center: 300px;
    }
    #header_main {
    background: #ebebeb;
    background: -moz-linear-gradient(top, #ebebeb 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #ebebeb 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #ebebeb 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #ebebeb 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #ebebeb 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ebebeb’, endColorstr=’#ffffff’,GradientType=0 );
    }
    @media only screen and (max-width: 1024px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}
    #wrap_all {
    position: relative !important;
    }

    December 3, 2015 at 3:41 pm #546463
    gsestini

    Also, when I shrink the browser window a box with the menu items appear…how to show Menu written instead of the box?

    December 4, 2015 at 8:30 am #546823
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General styling to activate the mobile menu at an earlier point:

    @media only screen and (max-width: 1215px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}

    Regards,
    Rikard

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