Menu as expandable-hamburger vs. in-line text

Sydney
#1

Hello,

I would like the main menu at the top of the page to appear as in-line text instead of the expandable menu.

#2

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)

#3

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!

#4

Hello there,

I guess your desktop resolution width is 1024px. To display the desktop menu on this resolution, try to follow the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(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);
  1. Update
  2. Add the below CSS code into Appearance > Customize > Additional CSS.

/* 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

Desktop menu on tablet
Different background collor on PC and phone
Front page different on Desktop to Laptop
#5

Thank you for your help. This worked perfectly!