Burger Menu in Tablet Mode at https://eclectic-diversions.com/

APD Toronto
APD Toronto used Ask the Experts™
on
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,
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Paul MacDonaldDirector, Information Systems

Commented:
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 Developer

Author

Commented:
Any suggestion on what CSS changes I need?
Paul MacDonaldDirector, Information Systems

Commented:
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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

APD TorontoSoftware Developer

Author

Commented:
I know, but what specific changes should I be looking on, since this is child theme?
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 Developer

Author

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

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 Guru
Most Valuable Expert 2011

Commented:
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 Developer

Author

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.
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...
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 Guru
Most Valuable Expert 2011

Commented:
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 Developer

Author

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 Guru
Most Valuable Expert 2011

Commented:
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 Guru
Most Valuable Expert 2011

Commented:
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

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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 Developer

Author

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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.
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 Developer

Author

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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 Developer

Author

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 Developer

Author

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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 Developer

Author

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
I will try and come back to this later tonight or tomorrow.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
To keep things easy, let's stick to the original site for now.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Never-mind, if it is the same theme, the 2nd one will be ok to work with.
APD TorontoSoftware Developer

Author

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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 Developer

Author

Commented:
In the JS Bin, if you click the burger button the menu does not stick. Also, it is still horizontal, and not vertical.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
There is an cross site scripting error. Try it on your own server.  If it is still not working, hit f12 and see if there are other errors in play.
APD TorontoSoftware Developer

Author

Commented:
Sorry, last week was hectic.

I just updated  the live css at https://eclectic-diversions.com/wp-content/themes/eclectic/style.css starting at Line 111, and there is no JS Error, but the affectt is the same.

I think we need some JS... at very least, maybe add/removeClass("collapsed")?
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
I will take a look at it later today.
APD TorontoSoftware Developer

Author

Commented:
I think it disappears because of your Line 15 above... its always display: none...

Secondly,  I think there's something in the ::before and ::after pseudo-elements near #menu-main-menu, that is responsible for  having the menu horizontal or vertical, but I can't pinpoint it
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Here is some generic CSS to alter the break point for a Bootstrap 3.x Navbar. Just change the 995 to whatever the value you want for your site. I did some tests and 995 seems to work out ok.

Place this in your child theme or in your CSS override / customisation of your theme dashboard
@media (max-width: 995px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

Open in new window

APD TorontoSoftware Developer

Author

Commented:
Hey Julian, its been a while...

I pasted your code in my child theme, but as you can see still no luck.

I just left my breakpoint at 980px, and my background-color, just to see if the breakpoint triggers, which it does.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Where did you add it? I checked your site and I can't find it appearing anywhere.
APD TorontoSoftware Developer

Author

Commented:
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Ok but I can't see where in your source that file is being added? If you do a view source on the page - it is not coming up.

The file you are pointing to is for this theme
Theme Name:     Eclectic by ACEs

The one that is loading on your page is
heme Name:   ATLAS 365 by ACEs

I am not seeing your updated .css on your site - which is why it is not working.
APD TorontoSoftware Developer

Author

Commented:
From Chrome if you go to view-source:https://eclectic-diversions.com/ the stylesheet is at line 161
Index
Then if you click the link at line 161, and scroll near the bottom you will get
Style
Dont worry about Atlas
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Apologies - I was going by your link in your opening post  http://www.atlas365.ca/

The problem with the link above is that you have a stylesheet
view-source:https://eclectic-diversions.com/wp-content/themes/appointment-pro/css/media-responsive.css?ver=5.0.3
Coming after your stylesheet (at around line 175) that is also defining those styles - so they are overriding yours.

Can you not have your stylesheet load after the appointment-pro media-responsive sheet
APD TorontoSoftware Developer

Author

Commented:
As you know this is my child theme, and I did not write the header. I just wrote the child style.css with @import from the ../appointment-pro/style.css
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Ok, I am just letting you know - the reason the changes are not taking effect is that the theme stylesheet is loading before the appointment-pro media-responsiveness stylesheet and that is the potential cause of the problem
APD TorontoSoftware Developer

Author

Commented:
Would it be possible to do a small prototype sample without the WordPress files?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I don't understand - what do you mean by prototype?
APD TorontoSoftware Developer

Author

Commented:
So, went to view source again, did Ctrl+A and copied everything. I pasted and moved line 169 to 179 and it looks (see below).

However, there are now 2 issues

1 - How do I do this permanently within WP? Do I somehow rewrite header.php?

2- Now, if you click on Services the sub-menu will open, but if you click on services again it will not close it.

<!DOCTYPE html>
<html lang="en-US" >
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="pingback" href="https://eclectic-diversions.com/xmlrpc.php">
	<title>Eclectic Diversions Productions</title>
<style type="text/css">

body { background: #ffffff; color: #8f969c; }
#wrapper { background-color: #ffffff; }

.navbar .navbar-nav > .open > a,
.navbar .navbar-nav > .open > a:hover,
.navbar .navbar-nav > .open > a:focus,
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
	color: #66418a;
}
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus, 
.dropdown-menu, 
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.dropdown-menu .active > a:focus {
background-color:#66418a;
}

.dropdown-menu > li > a { border-bottom:1px solid rgb(52,40,98) }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background-color: rgb(52,40,98) }
.dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color:#fff !important;}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background-color: #66418a !important;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #66418a !important; } 
}

@media only screen and (min-width: 200px) and (max-width: 480px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #66418a !important; }
}
.top-contact-detail-section { background: none repeat scroll 0 0 #66418a; }

.callout-btn2, a.hrtl-btn, 
.project-scroll-btn li:hover, 
a.works-btn, 
.blog-btn-sm, 
a.more-link,
.top-contact-detail-section,
.clients-btn-lg, .team-showcase-overlay, .blog-post-date-area .date, .blog-btn-lg, .blogdetail-btn a:hover, .cont-btn a:hover, .sidebar-widget > .input-group > .input-group-addon, .sidebar-widget > .input-group > .input-group-addon, .sidebar-widget-tags a:hover, .blog-pagination a:hover, .blog-pagination a.active, .navigation.pagination .nav-links a:hover, .navigation.pagination .nav-links .page-numbers.current, a.error-btn, a.error-btn:hover, a.error-btn:focus, .hc_scrollup, .tagcloud a:hover, .form-submit input, .media-body input[type=submit], .sidebar-widget input[type=submit], .footer-widget-column input[type=submit], .blogdetail-btn, .cont-btn button, .orange-widget-column > .input-group > .input-group-addon, .orange-widget-column-tags a:hover, .slider-btn-sm, .format-video-btn-sm, .slide-btn-sm, .slider-sm-area a.more-link, .blog-pagination span.current, .wpcf7-submit, .page-title-section, ins { background-color: #66418a; }

/* Font Colors */
.service-icon i,.portfolio-caption:hover h4 a, .portfolio-tabs li.active > a, .portfolio-tabs li > a:hover, .testmonial-area h4, .blog-post-sm a:hover, .blog-tags-sm a:hover, .blog-sm-area h3 > a:hover, .blog-sm-area h3 > a:focus, .footer-contact-icon i, .footer-addr-icon, .footer-blog-post:hover h3 a , .footer-widget-tags a:hover, .footer-widget-column ul li a:hover, .footer-copyright p a:hover, .page-breadcrumb > li.active a, .about-section h2 > span, .blog-post-lg a:hover, .blog-tags-lg a:hover, .blog-lg-area-full h3 > a:hover, .blog-author span, .comment-date a:hover, .reply a, .reply a:hover, .sidebar-blog-post:hover h3 a, ul.post-content li:hover a, .error-404 h1, .media-body th a:hover, .media-body dd a:hover, .media-body li a:hover, .blog-post-info-detail a:hover, .comment-respond a:hover, /* .blog-lg-area-left p > a, .blog-lg-area-right p > a, .blog-lg-area-full p > a, */ .blogdetail-btn a, .cont-btn a, .blog-lg-area-left h3 > a:hover, .blog-lg-area-right h3 > a:hover, .blog-lg-area-full h3 > a:hover, .sidebar-widget > ul > li > a:hover, 
.sidebar-widget table th, 
.footer-widget-column table th,  
.top-header-widget table th, 
.top-contact-detail-section table th, 
blockquote a, 
blockquote a:hover, 
blockquote a:focus, 
#calendar_wrap table > thead > tr > th, 
#calendar_wrap a, 
table tbody a, 
table tbody a:hover,
table tbody a:focus,
.textwidget a:hover, 
.format-quote p:before,
td#prev a, td#next a,
dl > dd > a, dl > dd > a:hover,
.rsswidget:hover, 
.recentcomments a:hover, 
p > a, 
p > a:hover,
ul > li > a:hover, tr.odd a, tr.even a, 
p.wp-caption-text a, 
.footer-copyright a, .footer-copyright a:hover  { color: #66418a; }

/* Border colors */
.footer-widget-tags a:hover , .sidebar-widget > .input-group > .input-group-addon, .sidebar-widget-tags a:hover, .blog-pagination a:hover, .blog-pagination a.active, .tagcloud a:hover, .media-body input[type=submit], .sidebar-widget input[type=submit], .footer-widget-column input[type=submit]  { border: 1px solid #66418a;} 

.footer-copyright-section {	border-bottom: 5px solid #66418a; }
.team-area:hover .team-caption { border-bottom: 2px solid #66418a; }
.blog-lg-box img { border-bottom: 3px solid #66418a;; }
blockquote {border-left: 5px solid #66418a;}

/* Box Shadow*/
.callout-btn2, a.hrtl-btn, a.works-btn, .blog-btn-sm, .more-link, .blogdetail-btn a, .cont-btn a, a.error-btn, .form-submit input, .blogdetail-btn, .cont-btn button, .slider-btn-sm , .slider-sm-area a.more-link, .format-video-btn-sm, .slide-btn-sm, .wpcf7-submit, 
.post-password-form input[type="submit"], .clients-btn-lg { box-shadow: 0 3px 0 0 #66418a; }

/* Image Background */
.testimonial-section, .contact-detail-section { background: url("https://eclectic-diversions.com/wp-content/themes/appointment-pro/images/bg1.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0); }
.testimonial-section .overlay, .contact-detail-section .overlay { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); }
.author-box img {background-color: #2a2a2a;}
.top-header-widget {
    background-color: #21202e;
}
.header-contact-info2 a {
    color: #ffffff;
}



/* Woocommerce Color Css-------------------------*/

.woocommerce .star-rating span, .woocommerce .posted_in a:hover, .woocommerce-product-rating a:hover, .woocommerce .tagged_as a:hover, .woocommerce-message:before, 
.woocommerce-info:before, .woocommerce-message a, .woocommerce-message a:hover, .woocommerce-info a, .woocommerce-info a:hover, .woocommerce-error a, .woocommerce-error a:hover, 
.woocommerce-cart table.cart td a:hover, .woocommerce-account .addresses .title .edit { 
	color: #66418a; 
}

.woocommerce ul.products li.product:hover .onsale, .woocommerce ul.products li.product:hover .button, .woocommerce ul.products li.product:focus .button, 
.woocommerce div.product form.cart .button:hover, .woocommerce div.product form.cart .button:focus, .woocommerce div.product form.cart .button, .woocommerce a.button, 
.woocommerce a.button:hover, .woocommerce .cart input.button, .woocommerce input.button.alt, .woocommerce input.button, .woocommerce button.button, .woocommerce #respond input#submit, 
.woocommerce .cart input.button:hover, .woocommerce .cart input.button:focus, 
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus, 
.woocommerce input.button.alt:hover, .woocommerce input.button.alt:focus, .woocommerce input.button:hover, .woocommerce input.button:focus, 
.woocommerce button.button:hover, .woocommerce button.button:focus, .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit:focus, 
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, 
.woocommerce nav.woocommerce-pagination ul li span.current, .ui-slider-horizontal .ui-slider-range { 
	background: #66418a; 
}

.woocommerce ul.products li.product:hover, .woocommerce ul.products li.product:hover, 
.woocommerce-page ul.products li.product:hover, .woocommerce-page ul.products li.product:hover, 
.woocommerce ul.products li.product:hover .button, .woocommerce ul.products li.product:focus .button, 
.woocommerce div.product form.cart .button:hover, .woocommerce div.product form.cart .button:focus, 
.woocommerce div.product form.cart .button, .woocommerce a.button, .woocommerce a.button:hover, 
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, 
.woocommerce nav.woocommerce-pagination ul li span.current {
	border: 1px solid #66418a;
}

.woocommerce ul.products li.product:hover .onsale { border: 2px solid #66418a; }
.woocommerce-message, .woocommerce-info { border-top-color: #66418a; }
</style>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="Eclectic Diversions Productions &raquo; Feed" href="https://eclectic-diversions.com/index.php/feed/" />
<link rel="alternate" type="application/rss+xml" title="Eclectic Diversions Productions &raquo; Comments Feed" href="https://eclectic-diversions.com/index.php/comments/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/eclectic-diversions.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.0.3"}};
			!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='wp-block-library-css'  href='https://eclectic-diversions.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='bookly-intlTelInput-css'  href='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/css/intlTelInput.css?ver=16.8' type='text/css' media='all' />
<link rel='stylesheet' id='bookly-ladda-min-css'  href='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/css/ladda.min.css?ver=16.8' type='text/css' media='all' />
<link rel='stylesheet' id='bookly-picker-css'  href='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/css/picker.classic.css?ver=16.8' type='text/css' media='all' />
<link rel='stylesheet' id='bookly-picker-date-css'  href='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/css/picker.classic.date.css?ver=16.8' type='text/css' media='all' />
<link rel='stylesheet' id='bookly-main-css'  href='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/css/bookly-main.css?ver=16.8' type='text/css' media='all' />

<link rel='stylesheet' id='appointment-bootstrap-css-css'  href='https://eclectic-diversions.com/wp-content/themes/appointment-pro/css/bootstrap.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='appointment-menu-css-css'  href='https://eclectic-diversions.com/wp-content/themes/appointment-pro/css/theme-menu.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='appointment-font-css-css'  href='https://eclectic-diversions.com/wp-content/themes/appointment-pro/css/font/font.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='appointment-font-awesome-css-css'  href='https://eclectic-diversions.com/wp-content/themes/appointment-pro/css/font-awesome/css/font-awesome.min.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='appointment-lightbox-css-css'  href='https://eclectic-diversions.com/wp-content/themes/appointment-pro/css/lightbox.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='appointment-media-responsive-css-css'  href='https://eclectic-diversions.com/wp-content/themes/appointment-pro/css/media-responsive.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='appointment-element-css-css'  href='https://eclectic-diversions.com/wp-content/themes/appointment-pro/css/element.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='appointment-fonts-css'  href='//fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C600%2C700%2C800%7Citalic%7CCourgette&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='appointment-style-css'  href='https://eclectic-diversions.com/wp-content/themes/eclectic/style.css?ver=5.0.3' type='text/css' media='all' />

<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/js/spin.min.js?ver=16.8'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/js/ladda.min.js?ver=16.8'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/js/hammer.min.js?ver=16.8'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/js/jquery.hammer.min.js?ver=16.8'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/js/picker.js?ver=16.8'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/js/picker.date.js?ver=16.8'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/js/intlTelInput.min.js?ver=16.8'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var BooklyL10n = {"ajaxurl":"https:\/\/eclectic-diversions.com\/wp-admin\/admin-ajax.php","csrf_token":"2c23e6ed8d","today":"Today","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"days":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"daysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"nextMonth":"Next month","prevMonth":"Previous month","show_more":"Show more"};
/* ]]> */
</script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/js/bookly.min.js?ver=16.8'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/themes/appointment-pro/js/jquery-ui.js?ver=5.0.3'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/themes/appointment-pro/js/bootstrap.min.js?ver=5.0.3'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/themes/appointment-pro/js/menu/menu.js?ver=5.0.3'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/themes/appointment-pro/js/page-scroll.js?ver=5.0.3'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/themes/appointment-pro/js/carousel.js?ver=5.0.3'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-content/themes/appointment-pro/js/lightbox/lightbox-2.6.min.js?ver=5.0.3'></script>
<link rel='https://api.w.org/' href='https://eclectic-diversions.com/index.php/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://eclectic-diversions.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://eclectic-diversions.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 5.0.3" />
<link rel="canonical" href="https://eclectic-diversions.com/" />
<link rel='shortlink' href='https://eclectic-diversions.com/' />
<link rel="alternate" type="application/json+oembed" href="https://eclectic-diversions.com/index.php/wp-json/oembed/1.0/embed?url=https%3A%2F%2Feclectic-diversions.com%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://eclectic-diversions.com/index.php/wp-json/oembed/1.0/embed?url=https%3A%2F%2Feclectic-diversions.com%2F&#038;format=xml" />
<style>body.boxed{ background-image:url("https://eclectic-diversions.com/wp-content/themes/appointment-pro/images/bg-pattern/bg_img0.png");}</style><link rel="icon" href="https://eclectic-diversions.com/wp-content/uploads/2019/02/Logo-150x98.png" sizes="32x32" />
<link rel="icon" href="https://eclectic-diversions.com/wp-content/uploads/2019/02/Logo.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://eclectic-diversions.com/wp-content/uploads/2019/02/Logo.png" />
<meta name="msapplication-TileImage" content="https://eclectic-diversions.com/wp-content/uploads/2019/02/Logo.png" />
	</head>
	<body class="home page-template-default page page-id-8 wide" >
<div id="wrapper">
<!--Logo & Menu Section-->	
<nav class="navbar navbar-default">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
								<a class="navbar-brand" href="https://eclectic-diversions.com/">
										<img class="img-responsive" src="https://eclectic-diversions.com/wp-content/uploads/2019/02/Logo.png" style="height:75px; width:138px;"/>
									</a>
					
			<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-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-65 dropdown active"><a href="#">ABOUT<b class="caret"></b></a>
<ul class="dropdown-menu">
	<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-8 current_page_item menu-item-36 active"><a href="https://eclectic-diversions.com/">ABOUT US</a></li>
	<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="https://eclectic-diversions.com/index.php/about-douglas/">ABOUT DOUGLAS</a></li>
	<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="https://eclectic-diversions.com/index.php/about-jim/">ABOUT JIM</a></li>
	<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="https://eclectic-diversions.com/index.php/about-frank/">ABOUT FRANK</a></li>
	<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="https://eclectic-diversions.com/index.php/about-consultant-4/">ABOUT CONSULTANT #4</a></li>
</ul>
</li>
<li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-50 dropdown"><a href="#">SERVICES<b class="caret"></b></a>
<ul class="dropdown-menu">
	<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="https://eclectic-diversions.com/index.php/video-services/">VIDEO SERVICES</a></li>
	<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="https://eclectic-diversions.com/index.php/business-services/">BUSINESS SERVICES</a></li>
	<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="https://eclectic-diversions.com/index.php/daily-motivation-minute/">DAILY MOTIVATION MINUTE</a></li>
	<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="https://eclectic-diversions.com/index.php/weekly-business-blog/">WEEKLY BUSINESS BLOG</a></li>
</ul>
</li>
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="https://eclectic-diversions.com/index.php/past-projects/">PAST PROJECTS</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="https://eclectic-diversions.com/index.php/testimonials/">TESTIMONIALS</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="https://eclectic-diversions.com/index.php/faq/">FAQ</a></li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://eclectic-diversions.com/index.php/book-an-appointment/">BOOK AN APPOINTMENT</a></li>
</ul>		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>	
<!--/Logo & Menu Section-->	
<div class="clearfix"></div><!-- Page Title Section -->
<div class="page-title-section">		
	<div class="overlay">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="page-title">
						<h1>ABOUT US</h1>					</div>
				</div>
				<div class="col-md-6">
					<ul class="page-breadcrumb">
											</ul>
				</div>
			</div>
		</div>	
	</div>
</div>
<!-- /Page Title Section -->
<div class="clearfix"></div><!-- Blog Section with Sidebar -->
<div class="page-builder">
	<div class="container">
		<div class="row">
			<!-- Blog Area -->
			<div class="col-md-12">			
			
			
						<div class="blog-lg-area-left">
					
			<p>Coming Soon&#8230;</p>
<p>Home Page</p>
							</div>
											</div>
			<!-- /Blog Area -->			
			<!--Sidebar Area-->
			<div class="col-md-4">
							</div>
			<!--Sidebar Area-->
		</div>
	</div>
</div>
<!-- /Blog Section with Sidebar -->
<!-- Footer Section -->
	
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- /Footer Section -->
<div class="clearfix"></div>
<!-- Footer Copyright Section -->
<div class="footer-copyright-section">
	<div class="container">
		<div class="row">
			
				                    
                                           <div class="col-md-8">
				<div class="footer-copyright">				                                      
                                    <div class="divAces">Developed by <a href="https://www.aces-project.com" target="_blank">
                                            Ace's Project Development Inc.
                                    </a></div>
				</div>
			</div>   
		</div>
	</div>
</div>
<!-- /Footer Copyright Section -->
<!--Scroll To Top--> 
<a href="#" class="hc_scrollup"><i class="fa fa-chevron-up"></i></a>
<!--/Scroll To Top--> 
<style type="text/css">

body { background: #ffffff; color: #8f969c; }
#wrapper { background-color: #ffffff; }

.navbar .navbar-nav > .open > a,
.navbar .navbar-nav > .open > a:hover,
.navbar .navbar-nav > .open > a:focus,
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
	color: #66418a;
}
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus, 
.dropdown-menu, 
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.dropdown-menu .active > a:focus {
background-color:#66418a;
}

.dropdown-menu > li > a { border-bottom:1px solid rgb(52,40,98) }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background-color: rgb(52,40,98) }
.dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color:#fff !important;}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background-color: #66418a !important;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #66418a !important; } 
}

@media only screen and (min-width: 200px) and (max-width: 480px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #66418a !important; }
}
.top-contact-detail-section { background: none repeat scroll 0 0 #66418a; }

.callout-btn2, a.hrtl-btn, 
.project-scroll-btn li:hover, 
a.works-btn, 
.blog-btn-sm, 
a.more-link,
.top-contact-detail-section,
.clients-btn-lg, .team-showcase-overlay, .blog-post-date-area .date, .blog-btn-lg, .blogdetail-btn a:hover, .cont-btn a:hover, .sidebar-widget > .input-group > .input-group-addon, .sidebar-widget > .input-group > .input-group-addon, .sidebar-widget-tags a:hover, .blog-pagination a:hover, .blog-pagination a.active, .navigation.pagination .nav-links a:hover, .navigation.pagination .nav-links .page-numbers.current, a.error-btn, a.error-btn:hover, a.error-btn:focus, .hc_scrollup, .tagcloud a:hover, .form-submit input, .media-body input[type=submit], .sidebar-widget input[type=submit], .footer-widget-column input[type=submit], .blogdetail-btn, .cont-btn button, .orange-widget-column > .input-group > .input-group-addon, .orange-widget-column-tags a:hover, .slider-btn-sm, .format-video-btn-sm, .slide-btn-sm, .slider-sm-area a.more-link, .blog-pagination span.current, .wpcf7-submit, .page-title-section, ins { background-color: #66418a; }

/* Font Colors */
.service-icon i,.portfolio-caption:hover h4 a, .portfolio-tabs li.active > a, .portfolio-tabs li > a:hover, .testmonial-area h4, .blog-post-sm a:hover, .blog-tags-sm a:hover, .blog-sm-area h3 > a:hover, .blog-sm-area h3 > a:focus, .footer-contact-icon i, .footer-addr-icon, .footer-blog-post:hover h3 a , .footer-widget-tags a:hover, .footer-widget-column ul li a:hover, .footer-copyright p a:hover, .page-breadcrumb > li.active a, .about-section h2 > span, .blog-post-lg a:hover, .blog-tags-lg a:hover, .blog-lg-area-full h3 > a:hover, .blog-author span, .comment-date a:hover, .reply a, .reply a:hover, .sidebar-blog-post:hover h3 a, ul.post-content li:hover a, .error-404 h1, .media-body th a:hover, .media-body dd a:hover, .media-body li a:hover, .blog-post-info-detail a:hover, .comment-respond a:hover, /* .blog-lg-area-left p > a, .blog-lg-area-right p > a, .blog-lg-area-full p > a, */ .blogdetail-btn a, .cont-btn a, .blog-lg-area-left h3 > a:hover, .blog-lg-area-right h3 > a:hover, .blog-lg-area-full h3 > a:hover, .sidebar-widget > ul > li > a:hover, 
.sidebar-widget table th, 
.footer-widget-column table th,  
.top-header-widget table th, 
.top-contact-detail-section table th, 
blockquote a, 
blockquote a:hover, 
blockquote a:focus, 
#calendar_wrap table > thead > tr > th, 
#calendar_wrap a, 
table tbody a, 
table tbody a:hover,
table tbody a:focus,
.textwidget a:hover, 
.format-quote p:before,
td#prev a, td#next a,
dl > dd > a, dl > dd > a:hover,
.rsswidget:hover, 
.recentcomments a:hover, 
p > a, 
p > a:hover,
ul > li > a:hover, tr.odd a, tr.even a, 
p.wp-caption-text a, 
.footer-copyright a, .footer-copyright a:hover  { color: #66418a; }

/* Border colors */
.footer-widget-tags a:hover , .sidebar-widget > .input-group > .input-group-addon, .sidebar-widget-tags a:hover, .blog-pagination a:hover, .blog-pagination a.active, .tagcloud a:hover, .media-body input[type=submit], .sidebar-widget input[type=submit], .footer-widget-column input[type=submit]  { border: 1px solid #66418a;} 

.footer-copyright-section {	border-bottom: 5px solid #66418a; }
.team-area:hover .team-caption { border-bottom: 2px solid #66418a; }
.blog-lg-box img { border-bottom: 3px solid #66418a;; }
blockquote {border-left: 5px solid #66418a;}

/* Box Shadow*/
.callout-btn2, a.hrtl-btn, a.works-btn, .blog-btn-sm, .more-link, .blogdetail-btn a, .cont-btn a, a.error-btn, .form-submit input, .blogdetail-btn, .cont-btn button, .slider-btn-sm , .slider-sm-area a.more-link, .format-video-btn-sm, .slide-btn-sm, .wpcf7-submit, 
.post-password-form input[type="submit"], .clients-btn-lg { box-shadow: 0 3px 0 0 #66418a; }

/* Image Background */
.testimonial-section, .contact-detail-section { background: url("https://eclectic-diversions.com/wp-content/themes/appointment-pro/images/bg1.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0); }
.testimonial-section .overlay, .contact-detail-section .overlay { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); }
.author-box img {background-color: #2a2a2a;}
.top-header-widget {
    background-color: #21202e;
}
.header-contact-info2 a {
    color: #ffffff;
}



/* Woocommerce Color Css-------------------------*/

.woocommerce .star-rating span, .woocommerce .posted_in a:hover, .woocommerce-product-rating a:hover, .woocommerce .tagged_as a:hover, .woocommerce-message:before, 
.woocommerce-info:before, .woocommerce-message a, .woocommerce-message a:hover, .woocommerce-info a, .woocommerce-info a:hover, .woocommerce-error a, .woocommerce-error a:hover, 
.woocommerce-cart table.cart td a:hover, .woocommerce-account .addresses .title .edit { 
	color: #66418a; 
}

.woocommerce ul.products li.product:hover .onsale, .woocommerce ul.products li.product:hover .button, .woocommerce ul.products li.product:focus .button, 
.woocommerce div.product form.cart .button:hover, .woocommerce div.product form.cart .button:focus, .woocommerce div.product form.cart .button, .woocommerce a.button, 
.woocommerce a.button:hover, .woocommerce .cart input.button, .woocommerce input.button.alt, .woocommerce input.button, .woocommerce button.button, .woocommerce #respond input#submit, 
.woocommerce .cart input.button:hover, .woocommerce .cart input.button:focus, 
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus, 
.woocommerce input.button.alt:hover, .woocommerce input.button.alt:focus, .woocommerce input.button:hover, .woocommerce input.button:focus, 
.woocommerce button.button:hover, .woocommerce button.button:focus, .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit:focus, 
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, 
.woocommerce nav.woocommerce-pagination ul li span.current, .ui-slider-horizontal .ui-slider-range { 
	background: #66418a; 
}

.woocommerce ul.products li.product:hover, .woocommerce ul.products li.product:hover, 
.woocommerce-page ul.products li.product:hover, .woocommerce-page ul.products li.product:hover, 
.woocommerce ul.products li.product:hover .button, .woocommerce ul.products li.product:focus .button, 
.woocommerce div.product form.cart .button:hover, .woocommerce div.product form.cart .button:focus, 
.woocommerce div.product form.cart .button, .woocommerce a.button, .woocommerce a.button:hover, 
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, 
.woocommerce nav.woocommerce-pagination ul li span.current {
	border: 1px solid #66418a;
}

.woocommerce ul.products li.product:hover .onsale { border: 2px solid #66418a; }
.woocommerce-message, .woocommerce-info { border-top-color: #66418a; }
</style>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-includes/js/comment-reply.min.js?ver=5.0.3'></script>
<script type='text/javascript' src='https://eclectic-diversions.com/wp-includes/js/wp-embed.min.js?ver=5.0.3'></script>
</div>
</body>
</html>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
If I copy
<link rel='stylesheet' id='appointment-style-css'  href='https://eclectic-diversions.com/wp-content/themes/eclectic/style.css?ver=5.0.3' type='text/css' media='all' />

Open in new window

To just before the body section - the page works as expected - media query kicks in at 980 - can open and close Hamburger.

How are you enqueing this script - where does it get included.
APD TorontoSoftware Developer

Author

Commented:
The parent theme, Appointment Pro is doing the enqueuing.

Is it a good idea/safe if I delete that line, then reinsert it using   JS/jQuery after everything loads?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Create your own style sheet
Put the styles in there
In your child theme functions.php enqueue your stylesheet there (ref: https://developer.wordpress.org/reference/functions/wp_enqueue_style/)

wp_enqueue_style( 'custom_nav_style',  get_stylesheet_uri() . "/assets/css/custom_nav_style.css", [SEE NOTE], '1.0', 'all' );

Open in new window


SEE NOTE: put the handle of the Appointment Pro stylesheet that is overriding your settings. In other words
Find the wp_enqueue_style for [https://eclectic-diversions.com/wp-content/themes/appointment-pro/css/media-responsive.css?ver=5.0.3]
Take the first parameter (same as we have above for the custom_nav_style) and add that to the SEE NOTE array.
So if the handle for media-responsive.css is app_pro_media_resp then do this

wp_enqueue_style( 'custom_nav_style',  get_stylesheet_uri() . "/assets/css/custom_nav_style.css", ['app_pro_media_resp '], '1.0', 'all' );

Open in new window


That will tell WP that your script needs media-responsive as a dependency - so yours will be output after.

You put your style sheet (called custom_nav_style.css) in the following location
/{root folder}/wp-content/themes/YourChildTheme/assets/css/custom_nav_style.css

Open in new window


In functions.php
function add_theme_scripts() {
  wp_enqueue_style( 'custom_nav_style',  get_stylesheet_uri() . "/assets/css/custom_nav_style.css", ['app_pro_media_resp '], '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Open in new window


Disclaimer: The above is all theory - code has not been tested.
APD TorontoSoftware Developer

Author

Commented:
I have done the following in my child theme's functions.php
<?php
/**Theme Name	: Eclectic by ACEs
 */

function add_theme_scripts() {

    wp_enqueue_style( 'custom_burger_style', get_stylesheet_directory_uri() . "/styles/burger.css", 
            ['appointment-media-responsive-css'], '1.0', 'all' );
    
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Open in new window


Note, get_stylesheet_uri() was giving me the styles.css and a 404 error, so I changed it to get_stylesheet_directory_uri() and there is no more error.

I changed the background-color to cyan just to see if the new css is in effect,. and it is, but the burger is still not showing at 1200px or less. I have uploaded the  changes.

You will also note that now burger.css is coming right after media-responsive.css, which is  what I think you wanted to achieve with functions.php?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I am not seeing burger.css in your source?
APD TorontoSoftware Developer

Author

Commented:
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I see - apologies I was working off this link www.atlas365.ca from your opening question - I see in one of the posts in what has become a very long thread, you changed the link.

I will have a look later today.
APD TorontoSoftware Developer

Author

Commented:
I changed the title of the post :)
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
IF you load burger.css after the page has loaded using the console tools - it works - so one of the other stylesheets is overriding it - probably te one immediately after it (styles.css)

I would try and make burger the last stylesheet to load.
APD TorontoSoftware Developer

Author

Commented:
I would try and make burger the last stylesheet to load.

How do you suggest I do this? JS?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
No, you need to setup it up in your call to wp_enque_style - try to find out what the handles are for the other stylesheets and make them dependencies.
APD TorontoSoftware Developer

Author

Commented:
So make all stylesheets as dependencies in the array?

Would it not be quicker with JS, or there is a downside to that?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
JS? In what way?
APD TorontoSoftware Developer

Author

Commented:
Rough idea...

find("#custom-_burger_style-css")- select entire <link> line and delete it

find("body"), before it entire line from above.

I can't remember the exact syntax, but I know it is possible.  I would also call this from footer.php after </body> to make sure that everything is loaded.

I know this could work, but any downside?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Ouch - no - just do it in your functions.php just make your styles.css a dependency for burger so that burger is after it.
APD TorontoSoftware Developer

Author

Commented:
Ok, I found in the appointment directory the following script.php
<?php
/* Includes all style and script files
 */
function appointment_scripts()
 {
		
		$appointment_options=theme_setup_data(); 
		$current_options = wp_parse_args(  get_option( 'appointment_options', array() ), $appointment_options );
		wp_enqueue_style('appointment-style', get_stylesheet_uri() );
		wp_enqueue_style('appointment-bootstrap-css',WEBRITI_TEMPLATE_DIR_URI.'/css/bootstrap.css');
		if($current_options['link_color_enable'] == true) {
		custom_light();
		}
		else
		{
		$class=$current_options['theme_color'];
		wp_enqueue_style('default', WEBRITI_TEMPLATE_DIR_URI . '/css/'.$class);
		}
		wp_enqueue_style('appointment-menu-css',WEBRITI_TEMPLATE_DIR_URI.'/css/theme-menu.css');
		/* Font Css */
        wp_enqueue_style('appointment-font-css',WEBRITI_TEMPLATE_DIR_URI.'/css/font/font.css');
		/* Font Awesome */
        wp_enqueue_style('appointment-font-awesome-css',WEBRITI_TEMPLATE_DIR_URI.'/css/font-awesome/css/font-awesome.min.css');
		wp_enqueue_style('appointment-lightbox-css',WEBRITI_TEMPLATE_DIR_URI.'/css/lightbox.css');
		/* Media Responsive Css */
		wp_enqueue_style('appointment-media-responsive-css',WEBRITI_TEMPLATE_DIR_URI.'/css/media-responsive.css');	
		/* Element Css */
		wp_enqueue_style('appointment-element-css',WEBRITI_TEMPLATE_DIR_URI.'/css/element.css');
		/* Bootstrap Js */
		  
		wp_enqueue_script( 'jquery' );
		wp_enqueue_script('appointment-jquery-ui' , WEBRITI_TEMPLATE_DIR_URI.'/js/jquery-ui.js');
        wp_enqueue_script('appointment-bootstrap-js' , WEBRITI_TEMPLATE_DIR_URI.'/js/bootstrap.min.js');
		wp_enqueue_script('appointment-menu-js' , WEBRITI_TEMPLATE_DIR_URI.'/js/menu/menu.js');
		wp_enqueue_script('appointment-page-scroll-js' , WEBRITI_TEMPLATE_DIR_URI.'/js/page-scroll.js');
		wp_enqueue_script('appointment-carousel-js' , WEBRITI_TEMPLATE_DIR_URI.'/js/carousel.js');
		wp_enqueue_script('appointment-lightbox-2.6.min-js' , WEBRITI_TEMPLATE_DIR_URI.'/js/lightbox/lightbox-2.6.min.js');
		if ( is_singular() ){ wp_enqueue_script( "comment-reply" );	}
		}	
add_action('wp_enqueue_scripts','appointment_scripts');

function appointment_custmizer_layout()
 {
		wp_enqueue_style('appointment-customizer-css',WEBRITI_TEMPLATE_DIR_URI.'/css/optionpanal-dragdrop.css');
}
add_action('customize_controls_print_styles','appointment_custmizer_layout');

add_action( 'admin_enqueue_scripts', 'admin_enqueue_script_function' );
function admin_enqueue_script_function()
{
wp_enqueue_style('appointment-drag-drop',WEBRITI_TEMPLATE_DIR_URI.'/css/drag-drop.css');
wp_enqueue_style('appointment-font-css',WEBRITI_TEMPLATE_DIR_URI.'/css/jquery-ui.css');
wp_enqueue_script('appointment-jquery-ui' , WEBRITI_TEMPLATE_DIR_URI.'/js/jquery-ui.js',array('jquery'));
wp_enqueue_script('appointment-jquery-ui-drag' , WEBRITI_TEMPLATE_DIR_URI.'/js/layout-drag-drop.js');
}
add_action('wp_head','head_enqueue_custom_css');
function head_enqueue_custom_css()
{
	$appointment_options=theme_setup_data(); 
	$custom_css = wp_parse_args(  get_option( 'appointment_options', array() ), $appointment_options);
	if($custom_css['webrit_custom_css']!='') {  ?>
	<style>
	<?php echo $custom_css['webrit_custom_css']; ?>
	</style>
	<?php } 
}



// footer custom script
function footer_custom_script()
{
$appointment_options=theme_setup_data(); 
$current_options = wp_parse_args(  get_option( 'appointment_options', array() ), $appointment_options);
if($current_options['link_color_enable'] == true) {
custom_light();
}
}
add_action('wp_footer','footer_custom_script');
?>

Open in new window


As a result, I wrote my child functions.php as
<?php
/**Theme Name	: Eclectic by ACEs
 */

function add_theme_scripts() {

    $dep = array();
    $dep[] = "appointment-style";
    $dep[] = "appointment-bootstrap-css";
    //$dep[] = "default";
    $dep[] = "appointment-menu-css";
    $dep[] = "appointment-font-css";
    $dep[] = "appointment-font-awesome-css";
    $dep[] = "appointment-lightbox-css";
    $dep[] = "appointment-media-responsive-css";	
    $dep[] = "appointment-element-css";
    //$dep[] = "appointment-customizer-css";
    //$dep[] = "appointment-drag-drop";
    $dep[] = "appointment-font-css";
    
    wp_enqueue_style( 'custom_burger_style', get_stylesheet_directory_uri() . "/styles/burger.css", 
            $dep, '1.0', 'all' );
    
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Open in new window


If I un-comment the 3 dependencies, my burger.css disappears - probably because they might be conditional dependencies.  At last, I can confirm that this is functioning as I needed it to.  Any feedback on the code above before I close?
APD TorontoSoftware Developer

Author

Commented:
Julian, can I get you final thoughts on my last post?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
WordPress is dependency hell - the more plugins you add the more you have to worry about things banging into each other.

If the above is working for you then go with it.

I did find a good discussion on this topic here  which provides some interesting background as well.
APD TorontoSoftware Developer

Author

Commented:
Thank you for your help. This was a long one.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Wordpress can do that - but as always you are most welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial