Burger Menu in Tablet Mode

HI Experts,

I have a child theme based on Appointment Pro that I am using on www.atlas365.ca

As you can see, in mobile view I have a burger menu, but how can I make the burger menu appear in tablet view as well, in order to avoid the menu overlap the logo?

Thank you,
APD TorontoSoftware DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul MacDonaldDirector, Information SystemsCommented:
It looks as if you need to modify the CSS so it switches to "tablet" or "mobile" mode a little sooner, while the screen is still relatively wide.  You'll have to experiment with what numbers work best.
APD TorontoSoftware DeveloperAuthor Commented:
Any suggestion on what CSS changes I need?
Paul MacDonaldDirector, Information SystemsCommented:
Look for @media lines in your CSS, specifically something that refers to a min-width of around 770px. Make that number a little bigger until you're satisfied.
Maximize Customer Retention with Superior Service

The IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more to help build customer satisfaction and retention.

APD TorontoSoftware DeveloperAuthor Commented:
I know, but what specific changes should I be looking on, since this is child theme?
lenamtlCommented:
Hi,

You just need to change / add the CSS @media queries for the navbar-toggle  / navbar
see : https://www.w3schools.com/css/css_rwd_mediaqueries.asp

your CSS file is located : https://atlas365.ca/wp-content/themes/appointment-pro/css/media-responsive.css?ver=5.0.3


So you may want to add a new class or edit existing ones
look for navbar-toggle for burger and navbar for menu
Here an example of what you have for navbar-toggle

@media only screen and (max-width: 767px) and (min-width: 480px)
.navbar-toggle {
    color: #FFFFFF;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: 700;
    margin: 13px auto;
    padding: 9px 17px;
    text-transform: uppercase;
}


@media only screen and (max-width: 480px) and (min-width: 200px)
.navbar-toggle {
    color: #FFFFFF;
    display: block;
    float: none;
    font-size: 12px;
    font-weight: 700;
    margin: 13px auto;
    padding: 7px 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

Open in new window

APD TorontoSoftware DeveloperAuthor Commented:
On my dev server, under my child theme .../themes/atlas/style.css I added the following which made the burger menu appear under tablet view. However, how do I get the menu options to stack one after another, and open/close as they are in mobile view?

/*Activate Burger Menu in Tablet Mode*/
@media only screen and (max-width: 1000px) and (min-width: 200px){
    
    body{
        background-color: red !important;
    }
    
    .navbar-default .navbar-toggle, .navbar-toggle.collapsed {
        display: inline-block;
        right: 15px;
        position: absolute;
        top: 15px;
        border: 0;
    }
}

Open in new window

lenamtlCommented:
Hi,

Remove what you added in .../themes/atlas/style.css

You should edit this ONLY this file  https://atlas365.ca/wp-content/themes/appointment-pro/css/media-responsive.css?ver=5.0.3

These values are not making sense to me
@media only screen and (max-width: 1000px) and (min-width: 200px)

Open in new window


Usually the main menu will appear for desktop view and burger menu should appear for smaller device.
You may decide to have the burger menu all the time if you want, but you will need to comment the navbar css
https://atlas365.ca/wp-content/themes/appointment-pro/css/media-responsive.css

Any way make sure the values are not overlapping the logical...

As the theme is a premium one you may want to contact appointment-pro author to get some support...
https://webriti.com/contact-us/
Terry WoodsIT GuruCommented:
Higher quality themes tend to have a mobile menu (burger menu) break point in their theme settings, where you can just set the pixel width value. That would be the first place I'd look.
APD TorontoSoftware DeveloperAuthor Commented:
I have contacted the theme author, webritti, but no reply...

I also cannot find a breakpoint setting under wp-admin...

Lastly, i have also avoided changing code of the parent theme.

Would appreciate more advise.
lenamtlCommented:
The actual burger css is inside this file, this is where it take the classes... and this is where you need to edit
https://atlas365.ca/wp-content/themes/appointment-pro/css/media-responsive.css


I understand that you have a child theme but the menu CSS is taken from the parent...
lenamtlCommented:
Hi,

All the media queries for the burger menu / main menu are located inside this file, you just need to edit and make some tests.
(always do a backup of the file first)
https://atlas365.ca/wp-content/themes/appointment-pro/css/media-responsive.css

They also provide support on their forum
https://webriti.com/support/categories/appointment

*If you don't want to edit the parent theme them you can create a classes that will override the main class in some situation
Just put your CSS url under all CSS link and you can put Important! flag to it.

You may also hire a dev to help you with this, menus are not only CSS several have media queries logical inside the javascript or may depend of other JS script, this is more true with premium theme. To my opinion menus are one of the most complex part of a theme
Terry WoodsIT GuruCommented:
I agree with @lenamtl that menus are one of the more complex parts of a theme. I try to minimise CSS customisations to them for that reason. Such customisations tend to make a site more fragile, ie more likely to break when installing future theme updates. Still, I'll try to help if I can, if you're still unable to get the suggested solution working.

I'd like to continue exploring the possibility that there's a setting in the theme options you can update. Is there any documentation available for the theme?

Here's an example of what you'd be looking for: https://wpexplorer-themes.com/total/docs/alter-mobile-menu-breakpoint/
APD TorontoSoftware DeveloperAuthor Commented:
I cannot find any relevant settings. Here are some snapshots

You mentioned that most themes have this. Which would you day would be best and the fastest to adjust to my design?

There won't be anything too much than what you see now.
1-Header-Settings.PNG
2-Customizing-Header-Settings.PNG
Terry WoodsIT GuruCommented:
I didn't say most! Even some themes I would describe as high quality don't offer it, but I see it as an important feature to provide a tidy responsive site.

If you are considering changing themes, then I can confirm that the free version of the Astra theme does have the option available.

I prefer to only use themes that have a large number of installations, as I feel this increases the likelihood of future security updates being released if any issues are found. The Astra theme appears to be the 6th most installed free theme on wordpress.org (3rd, if you exclude the default themes included with a WordPress install), with 200,000 active installations.

The top selling theme on Themeforest, Avada, also has a mobile menu breakpoint option. However, though Avada is a powerful theme, I have found it frustratingly slow to work with, perhaps due to the complexity that comes with all the features.

Screenshots of the theme options for both themes are attached.
mobile breakpoint option in Astramobile breakpoint options in Avada theme
Terry WoodsIT GuruCommented:
You might consider this as a quick fix, if you're happy with just tidying up the wrapping:

#bs-example-navbar-collapse-1 {
    margin-left: 80px;
}

Open in new window

lenamtlCommented:
Hi,

Just to recap all possible solution:

Edit this file  https://atlas365.ca/wp-content/themes/appointment-pro/css/media-responsive.css

and change the @media queries, here are the actual values for the toggle menu
you may also want to change the class for .navbar (main menu)
@media only screen and (max-width: 767px) and (min-width: 480px)
.navbar-toggle {
    color: #FFFFFF;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: 700;
    margin: 13px auto;
    padding: 9px 17px;
    text-transform: uppercase;
}


@media only screen and (max-width: 480px) and (min-width: 200px)
.navbar-toggle {
    color: #FFFFFF;
    display: block;
    float: none;
    font-size: 12px;
    font-weight: 700;
    margin: 13px auto;
    padding: 7px 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

Open in new window


If you don't want to do that, there is not much we can do to help.

You can hire a dev or try to get support from the theme author through their forum.
https://webriti.com/support/categories/appointment

Menus are one of the most complex part of a theme and for this reason you may not have  the knowledge to fix it yourself, no offence here, it is  complex even for experienced dev.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I agree that in your case, making changes to the media queries are the way to go and will be a simple fix. However, this should be done in the child theme, not the parent theme.
APD TorontoSoftware DeveloperAuthor Commented:
Scott, but what code changes do I make to my child theme, as I don't want to adjust my parent theme as suggested by lenemti?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If the parent has .somthing{color:red} and you want blue, then your child theme woud be .somthing{color:blue}.  In other words, you are just over writing the css that needs changing.
lenamtlCommented:
As long as the new class are located after into the code and I would add Important to it.
color: white !important;

Open in new window

APD TorontoSoftware DeveloperAuthor Commented:
These are all generalized thoughts..

Specifically, how does the horizontal menu become vertical with this theme?  I'm not looking for an answer here like "carefully with CSS using media queries".

This is an expert forum,
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If the theme is lacking in the ability to adjust breakpoints (this should be normal), then you need to figure out how to make the adjustments on your own and know how to apply the adjustments to the child them.

The first place to start is to narrow your browser until you see the mobile menu (hamburger).  In Chrome or Firefox, right click on the hamburger menu and select, "Inspect".  This will bring you to the browser dev tools / console where you can find what you need to adjust.

You will see something like below where probably the span is highlighted.  Find the parent and click on that. In this case it is the Button.
Capture.JPG
This is one of the pieces of code you want to adjust.
@media only screen and (max-width: 767px) and (min-width: 480px)
.navbar-toggle {
    color: #FFFFFF;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: 700;
    margin: 13px auto;
    padding: 9px 17px;
    text-transform: uppercase;
}

Open in new window

In the browser console change display:block to display:none.  You will see the hamburger disappears. This means you are in the right place.

The max width in the media query means this set of css instructions will only be applied within 767 to 480px. If you want to see the hamburger menu shown at a wider with, adjust the 767 to a larger number. Playing with this in the console will allow you to make adjustments and play without actually changing the code.  Once you have it where you want, you can copy and paste to your child theme.

As pointed out the main theme css file is located https://atlas365.ca/wp-content/themes/appointment-pro/css/media-responsive.css?ver=5.0.3.  This portion starts out on line 84
@media only screen and (min-width: 480px) and (max-width: 767px) {
/*Menus*/
.navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #1b1b1b;	transition: all 0.3s ease-in-out 0s; }
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-left: 0px; margin-right: 0px; }
.navbar-nav { width: 100%; }
.navbar-nav > li { border-right: 0px none; }
.navbar-toggle {
    color: #FFFFFF;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: 700;
    margin: 13px auto;
    padding: 9px 17px;
    text-transform: uppercase;
}

Open in new window


Now, in your child theme css, you can paste that entire block of code.  Change the 767px to a higher number (or lower).  I don't think you want this much higher than 800px though.  Note, with media queries, you can get more advanced and also specify if you want it to apply to only portrait or landscape mode.  https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

For each visual block of information you want to change, repeat this exercise.  It is unfortunate the theme does not come with an easy way to make these adjustments.
APD TorontoSoftware DeveloperAuthor Commented:
Thanks Scott,

The burger button, I found from earlier, but the code that I cannot see to find is what turns the horizontal menu items to vertical?
APD TorontoSoftware DeveloperAuthor Commented:
... so far I have in my child-theme
/*Activate Burger Menu in Tablet Mode*/

@media only screen and (max-width: 9800px) and (min-width: 200px){
    
    body{
        background-color: red !important;
    }
    
    .navbar-default .navbar-toggle, .navbar-toggle.collapsed {
        display: inline-block;
        right: 15px;
        position: absolute;
        top: 15px;
        border: 0;
    }
}

Open in new window


The burger menu button now comes up, but again, the menu items do not change
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Ok, the entire nav code is here

<nav id="navMain" class="navbar navbar-default">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
								
                            <div id="divId">
                                <a href="https://atlas365.ca/" title="Atlas 365">
									<img src="https://atlas365.ca/wp-content/uploads/2019/01/Atlas-365-Green.png" style="height:120px; 
                                                    width:89px;" id="img_logo">
                                        
                                        
									</a>
                                
                            </div> <!-- /#divId -->
					
                                                    
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
                                
                        
                
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul id="menu-main-menu" class="nav navbar-nav navbar-right"><li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="https://atlas365.ca/index.php/consulting/">CONSULTING</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="https://atlas365.ca/index.php/hemp/">HEMP</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="https://atlas365.ca/index.php/development/">DEVELOPMENT</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="https://atlas365.ca/index.php/smart-solutions/">SMART SOLUTIONS</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="https://atlas365.ca/index.php/innovations/">INNOVATIONS</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="https://atlas365.ca/index.php/impact/">SOCIAL IMPACT</a></li>
</ul>		</div><!-- /.navbar-collapse -->
                                
	</div><!-- /.container-fluid -->
</nav>

Open in new window


All that is changing is the CSS.

A trick that I used to see which CSS is changing is to widen the browser so you have the desktop menu. Now right click on one of the nav items and select inspect.  You will see in the console the a link will be highlighted. In the console, click on the li and you will see the css associated with the li.  Place the console browser to one side and keep the web browser on the other. I use 2 screens so it is easier.  With the li highlighted in the console, play with changing the web browser screen to a narrower with so the hamburger menu changes. Go back and forth and you will see the console change in front of you.  

What you see is
@media (min-width: 768px)
.navbar-nav > li {
    float: left;
}

Open in new window

Changes to
@media only screen and (max-width: 767px) and (min-width: 480px)
.navbar-nav > li {
    border-right: 0px none;
}

Open in new window


While the web browser is narrowed, click on "   border-right: 0px none;" to uncheck. Now type in float:left below it and you will see the menu goes horizontal.  Now you know where this is taking place.

Notice the developer put all of this on the media-responsive .css as I pointed out.
@media only screen and (min-width: 480px) and (max-width: 767px) {
/*Menus*/
.navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #1b1b1b;	transition: all 0.3s ease-in-out 0s; }
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-left: 0px; margin-right: 0px; }
.navbar-nav { width: 100%; }
.navbar-nav > li { border-right: 0px none; }
.navbar-toggle {
    color: #FFFFFF;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: 700;
    margin: 13px auto;
    padding: 9px 17px;
    text-transform: uppercase;
}

Open in new window


Really, you might get a way with pasting that entire thing into your child theme css and change the max-width to a higher number. That may be all you need to do.  It will be easier for you to try this and see if it will work than me rebuilding a test page to double check.  Let me know how that works.

When you put this in a child theme, it is no different then

.some_class{color:red;}
.some_class{color:blue;}

Open in new window

Whatever is last will override what is first.  Using the above css, the color of some_class will be blue.  The child theme gets loaded after the main theme.  If the main theme has .some_class{color:red;} and the child theme has .some_class{color:blue;} then the color will be blue. The same hold true for any php code.  If the the main theme has
function test(){
 echo "red";
}

Open in new window

and the child theme has
function test(){
 echo "blue";
}

Open in new window

When the function test() is called, it will echo blue.
APD TorontoSoftware DeveloperAuthor Commented:
Hi Scott,

It is my common practice to use Chrome's Inspector on 2 monitors as you described. I have also copied/pasted the  code you said in my child theme, but to no resolution.

https://eclectic-diversions.com/ is another website that I'm working on with the same exact issue.  The issue here is more evident given the client's choice of font, and this site I can change more easily.

What I want is for the burger menu to activate when the resolution is 980px or less.  As suggested, I pasted the specified code to my child theme (https://eclectic-diversions.com/wp-content/themes/eclectic/style.css) on Lines 127-152, but it does not help.

Additionally, if you create an inspector-stylesheet on the fly, and paste the following code, you will note that the burger icon appears at 980px, but the menu remains horizontal
/*Activate Burger Menu in Tablet Mode*/

@media only screen and (max-width: 980px) and (min-width: 200px){
    
    body{
        background-color: red !important;
    }
    
    .navbar-default .navbar-toggle, .navbar-toggle.collapsed {
        display: inline-block;
        right: 15px;
        position: absolute;
        top: 15px;
        border: 0;
    }
}

Open in new window


https://eclectic-diversions.com/ demonstrates exactly the issue that I'm having.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I will try and come back to this later tonight or tomorrow.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
To keep things easy, let's stick to the original site for now.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Never-mind, if it is the same theme, the 2nd one will be ok to work with.
APD TorontoSoftware DeveloperAuthor Commented:
Same theme, same issue.  The issue is more prominent, and I'm the only one viewing on this site at the moment - so I can change it more easily.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I looked at this in more detail and it is bootstrap that is in charge here.

Add this to your child theme and it should work. I have tested it here https://jsbin.com/qevevidawu/edit?html,output

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
   
    }
    .navbar-nav>li {
        float: none;
    }
 
} 

Open in new window


Play with changing the max width to what you want.
APD TorontoSoftware DeveloperAuthor Commented:
In the JS Bin, if you click the burger button the menu does not stick. Also, it is still horizontal, and not vertical.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.