Support » Theme: Sydney » Don’t Want Hamburger Menu

  • awapril

    (@awapril)


    I only have 4 main menu items at the top of my website.
    They seem like they should be easily displayed on at least an ipad. I see many websites that display all their menu items (many more than mine) listed out at the top of the page for mobile devices.

    Some websites even display the menu items when you hold the screen horizontally, and then when tipped vertically, the hamburger menu displays.

    I want my site to look as classy as possible, and I’m just not into the hamburger menu

    Is there a way for me to do this?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hello there,

    I have already posted a solution for such kind of this purpose in our own support channel. You can follow it here in this link.

    Regards,
    Kharis

    awapril

    (@awapril)

    I used the css code you posted in the link and it looked great for about 5 seconds…then the menu items grouped together and are now appearing as a drop down menu that is static at the top.

    It is only showing up this way on my ipad when I tilt it horizontally.

    How can I fix this?

    Hello there,

    Have you done step 1-3 written in this thread?

    Regards,
    Kharis

    awapril

    (@awapril)

    I didn’t do 1-3 because I thought it was two different options. oops!

    Also, I am concerned that you said “do at your own risk” and that it will be overwritten with the next update. I don’t want to break my site or have to keep entering code every time there is an update.

    Is there no other easy way to do this without the risk?

    If not, then perhaps I will just have to live with it the way it is…maybe move the hamburger menu to the right instead of center or something.

    awapril

    (@awapril)

    This woman has her menu area set up really nice…
    https://katefruitflowers.com/

    On my iphone it displays as a simple hamburger menu, which is fine, obviously for the small screen.

    But on my ipad, both vertically and horizontally tilted, the menu shows up with all the items present, no hamburger.

    Is there a way to tell what kind of settings she has or simple code that does not mess with the core of the theme?

    Hello there,

    Try doing 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() {
        
        $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
        $('#mainnav').find('.submenu').removeAttr('style');
        $('#header').find('.col-md-10').append($desktopMenu);
        $('.btn-submenu').remove();
        
      });  
    
    })(jQuery);
    
    

    4. Update
    5. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    
      
      .btn-menu{
        display: none;
      }
      
      #mainnav{
        display: block;
      }
      
    }
    
    @media only screen and (max-width:767px){
      
      #mainnav{
        float: none;
        display: table;
        margin-left: auto;
        margin-right: auto;
      }
      
    }
    

    Regards,
    Kharis

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