Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 16, 2016 at 3:04 pm #649258
    sublime5o

    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.

    June 18, 2016 at 6:38 am #650096
    Rikard

    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

    June 19, 2016 at 5:09 pm #650432
    sublime5o

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

    June 19, 2016 at 8:08 pm #650472
    Vinay

    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

    June 19, 2016 at 9:15 pm #650491
    sublime5o

    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!

    June 19, 2016 at 10:10 pm #650509
    Vinay

    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

    June 20, 2016 at 12:14 am #650535
    sublime5o

    Perfect. Thank you!

    June 20, 2016 at 8:40 am #650683
    Rikard

    Hi,

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

    Thanks,
    Rikard

    April 5, 2018 at 5:46 am #937462
    sproutstudio

    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!!

    April 7, 2018 at 6:01 am #938489
    Ismael

    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

    April 10, 2018 at 12:20 am #939463
    sproutstudio

    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 6 years, 7 months ago by sproutstudio.
    April 11, 2018 at 3:44 am #940159
    Ismael

    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

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