Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #649258

    I am trying to get the mobile menu to show up below the Logo and be full width (I can apply the background color, etc..) In the private content area is a link to a screenshot of what we are looking to do with the logo and mobile menu. Is this possible? The contact area in the right hand side of the menu background is a widget item (header). I can do most of the css styling once we get it in the right position and width.

    #650096

    Hi sublime5o,

    I’m not sure if that would be possible but send us a link to the site in question and we’ll have a look at it.

    Best regards,
    Rikard

    #650432

    I have posted the staging URL in the private area below.

    #650472

    Hi,

    I believe you are trying to achieve something like the screenshot attached?

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
    
    @media only screen and (max-width: 989px) {
    	#header .widget {
    		display:none!important;
    	}
    	.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide{
    	display:none!important;
        }
    #top #header.av_minimal_header .main_menu ul:first-child >li > ul {
    	display:none!important;
    }
    #top #header .av-main-nav > li > a .avia-menu-text {
    	font-size:13px!important;
    }
    .responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
        display: block!important;
    }
    .av-main-nav > li > a {
        padding: 20px 15px 20px 15px!important;
    }
    }
    

    Best regards,
    Vinay

    #650491

    I wanted to maintain the Hamburger Mobile menu and not just have the menu links in the bar. If you see the screenshot I supplied you will see the difference. Thanks so far!

    #650509

    Hi,

    Thank you for the clarification Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 989px) {
    	#header .widget {
    		margin-top:130px;
    		transform: scale(.5)!important;		
    	}
    	#header .widget a {		
    	color:#FFF!important;
    	}	
    	.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide{
    	transform:translateY(13vh);
        }
    
    .responsive.html_mobile_menu_tablet #header_main_alternate {
        display: block!important;
    }}
    
    @media only screen and (max-width: 767px) {
    	#header .widget {
    		margin-top:70px;
    		transform: scale(.5)!important;	
    		min-width:200px;	
    		margin-left:-50px;
    	}
    	.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide{
    	transform:translateY(11vh);
        }}
    

    Best regards,
    Vinay

    #650535

    Perfect. Thank you!

    #650683

    Hi,

    Great, glad we could help. Please let us know if you should need any more help on the topic.

    Thanks,
    Rikard

    #937462

    I’m interested in doing something similar, I tried the code last posted but it didn’t work for me. I’ve included a site with a navigation button like I’m looking for.
    Basically looking for the menu to stay below the logo on Mobile, and to say MENU instead of the Hamburger icon.
    Thanks!!

    #938489

    Hi,

    Please try the following css codes.

    @media only screen and (max-width: 767px) {
    .responsive #top .logo {
        width: 100%;
    }
    
    .responsive #top #wrap_all .main_menu {
        position: relative;
    }
    
    .responsive #top .av-logo-container .avia-menu {
        height: 100%;
        width: 100%;
    }
    
    .responsive #top #header_main > .container .main_menu .av-main-nav > .av-burger-menu-main > a {
        padding: 0;
    }
    
    .av-burger-menu-main {
        position: absolute !important;
        left: 50%;
        transform: translateX(-50%);
        float: none !important;
    }
    }

    Remove browser cache or do a hard refresh prior to testing the page.

    Best regards,
    Ismael

    #939463

    Its close, but I’d like to have the menu say “MENU”, not the hamburger icon.

    Can we also hide the search icon on this mobile version?

    And I’d also like the logo bigger. (like 300px wide)

    • This reply was modified 5 years, 11 months ago by sproutstudio.
    #940159

    Hi,

    You can include the following css codes inside the css media query above to change the size of the logo and display the “Menu” text instead of the default mobile menu bars.

    #top #menu-item-search {
        display: none !important;
    }
    
    .av-hamburger strong {
        display: block;
    }
    
    .av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after {
        display: none;
    }
    
    .responsive .logo img {
        max-height: 150px;
    }

    Best regards,
    Ismael

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