Hello,
I would like the main menu at the top of the page to appear as in-line text instead of the expandable menu.
Hello,
I would like the main menu at the top of the page to appear as in-line text instead of the expandable menu.
I’m sorry, I accidentally submitted that before I was finished. Is it possible to have the menu appear as the expandable hamburger only on tablet and phone view? For a desktop computer, I prefer the text to appear visible at the top (sticky). I feel like I achieved this once, but now I can’t figure out how to get back to it!
http://www.goliasbooks.com (currently in Coming Soon mode)
When the menu is in expandable mode for phone and tablet, I would like to be able to have the menu items centered, rather than left-justified. Thank you!
Hello there,
I guess your desktop resolution width is 1024px. To display the desktop menu on this resolution, try to follow the below steps:
;(function($) {
$(window).on('load resize', function() {
if ( matchMedia( 'only screen and (min-width: 1024px) and (max-width: 1025px) ' ).matches ) {
$('#mainnav').attr('id', 'mainnav2').removeAttr('style');
}
});
var menuType = 'desktop';
$(window).on('load resize', function() {
var currMenuType = 'desktop';
if ( matchMedia( 'only screen and (max-width: 1023px)' ).matches ) {
currMenuType = 'mobile';
}
if ( currMenuType !== menuType ) {
menuType = currMenuType;
if ( currMenuType === 'mobile' ) {
var $mobileMenu = $('#mainnav2').attr('id', 'mainnav-mobi').hide();
var hasChildMenu = $('#mainnav-mobi').find('li:has(ul)');
$('#header').find('.header-wrap').after($mobileMenu);
hasChildMenu.children('ul').hide();
hasChildMenu.children('a').after('<span class="btn-submenu"></span>');
$('.btn-menu').removeClass('active');
} else {
var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
$desktopMenu.find('.submenu').removeAttr('style');
$('#header').find('.col-md-10').append($desktopMenu);
$('.btn-submenu').remove();
}
}
});
$('.btn-menu').on('click', function() {
$('#mainnav-mobi').slideToggle(300);
$(this).toggleClass('active');
});
$(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {
$(this).toggleClass('active').next('ul').slideToggle(300);
e.stopImmediatePropagation()
});
})(jQuery);
/* Change mobile menu breakpoint */
#mainnav2 .sub-menu li:hover>a,#mainnav2 ul li ul:after{background-color:#d65050}#mainnav2 ul ul li,.site-header.float-header #mainnav2{padding:0}#mainnav2 ul li a:hover,#mainnav2>ul>li>a.active,#mainnav2>ul>li>a:hover{color:#d65050}#mainnav2 ul li,#mainnav2 ul li a{position:relative}#mainnav2 .sub-menu li:before,#mainnav2-mobi ul li::before{content:''}.site-header.float-header #mainnav2>ul>li>a{height:70px;line-height:70px}#mainnav2 ul li ul:after{transition:all .3s ease;-webkit-transition:all .3s ease;content:"";position:absolute;left:0;width:100%;height:1px}#mainnav2{display:block;float:right;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-ms-transition:all .3s linear;-o-transition:all .3s linear;transition:all .3s linear}#mainnav2 li:hover>ul,#mainnav2 ul li ul{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease}#mainnav2 ul{list-style:none;margin:0;padding:0}#mainnav2 li{float:left;padding:0 14px}#mainnav2 ul li a{display:block;font-size:14px;font-family:Raleway,sans-serif;color:#fff;font-weight:500;text-decoration:none;outline:0;float:left}#mainnav2 ul ul a{width:180px;font-family:"Source Sans Pro",sans-serif!important}#mainnav2>ul>li:last-child{padding-right:0}#mainnav2 ul li ul{width:180px;position:absolute;top:100%;left:initial;opacity:0;visibility:hidden;-webkit-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-o-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;transition:all .3s ease}#mainnav2 ul li ul ul,#mainnav2 ul li ul ul:after{top:0}#mainnav2 ul li ul li ul{left:100%}#mainnav2 li:hover>ul{opacity:1;padding-top:10px;visibility:visible;left:auto;display:block!important;transition:all .3s ease}#mainnav2 li:hover>ul ul{padding-top:0;left:100%}#mainnav2 .sub-menu{z-index:99999}#mainnav2 .sub-menu li a{color:#fff;display:block;line-height:30px;background:#1c1c1c;padding:0 18px;border-top:1px solid #252525;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}#mainnav2 .sub-menu li:hover>a{color:#fff}#mainnav2 li:hover>.sub-menu>li>a{padding:8px 18px}#mainnav2 ul li::before{font-family:Fontawesome;color:#fff;float:left;margin:5px 5px 0 0;font-size:14px;line-height:1;font-weight:400}#mainnav2 .sub-menu li:before{margin:0;transition:all .3s ease;-webkit-transition:all .3s ease}#mainnav2-mobi ul li a{float:none}@media only screen and (max-width:1399px){.site-header #mainnav2 ul li ul{right:14px}.site-header #mainnav2 ul li ul li ul{left:-100%}}@media only screen and (min-width:1024px){.btn-menu{display:none!important}.site-header{position:absolute;background-color:transparent}}
/* Change mobile menu breakpoint ends */
To center the mobile menu text, add the below CSS code:
#mainnav-mobi ul li a {
text-align: center;
}
Regards,
Kharis
Thank you for your help. This worked perfectly!