Menu & Sub Menu Stacking

To move the Level 3, try this:

.dropdown-submenu > .dropdown-menu {
    top: 110%;
    left: 100%; /* Adjust */
}

I’ve updated my Navbar Guide and waiting for Nic to publish. But this extract should help the colors:

/* Level 2 Surround */
.dropdown-menu {
background-color: lightblue ;
}
/* Level 2/3 dropdown link before hover */
.dropdown-menu > li > a {
background-color: red ;
color: white;
}
/* Level 2 dropdown link with hover */
.dropdown-menu > li > a:hover {
background-color: pink !important;
color: black !important;
}

/* Level 3 Surround */
.dropdown-submenu  > .dropdown-menu {
background-color: darkblue ;
}
/* Level 2/3 dropdown link before hover */
.dropdown-menu > li > a {
background-color: red ;
color: white;
}
/* Level 3 dropdown link with hover */
.dropdown-submenu  > .dropdown-menu > li > a:hover {
background-color: lightgreen !important;
color: black !important;
}

Navbar Guide just published

This is so amazing… I have been racking my brain about it for weeks and trying different things. Thank you so much!

@rdellconsulting – After reviewing this amazing nav bar, I had a question with the code you provided: Is there a way to make it easier to navigate from menu to sub menu item??? I was testing it and the submenu is about 10 px (Probably) lower then where the mouse hovers on an item, making it very hard to select a sub menu item. Is there away of move it up a bit so its easier?

https://www.seriousinjurylawyernyc.com

Also to add to that note, I love the color hovering changes from menu to submenu, but is there a way to make the background of the submenu a totally different color then the menu? Maybe there is a way to change it in the code you provided but it seems the background color changes the WHOLE menu and not just one part.

Thanks so much.

/* Level 3 Surround */
.dropdown-submenu  > .dropdown-menu {
background-color: darkblue ;
margin: -100px 0px 0px 100px; /* Adjust this */
}

I thought I dealt with background-color in the Navbar Guide? It shows Level 1/White, Level 2/Red, Level 3/DarkBlue?

@rdellconsulting — It does not do the multi colors.

https://www.seriousinjurylawyernyc.com

check out the Practice Areas, also I need to see how the margins can line up. if you click Practice areas then — Ferry Boats you can see how the sub menu is just a smidge below. I would like it to be right next to Ferry Boats so it is perfectly aligned. (when it is like this the mouse is jumpy and it is a little hard to click the sub menu) I believe it’s the px that needs to be adjusted?

See below the Custom CSS code I have for the site:

.navbar-wrapper .navbar h2, h2.site-description,
.tc-header .brand .site-title {
font-family: \”squada one\”;
}

.colophon {
background: transparent!important;
}
#footer {
background: skyblue!important;
}

/* CENTER TAGLINE */
.navbar-wrapper .navbar.resp h2 {
display: block;
text-align: left;
margin: px 20%; /* Adjust +/- % if needed */
}

.tc-header a.social-icon,
footer#footer .colophon a.social-icon { font-size: 20px;}
a.icon-feed, footer#footer .colophon a.icon-feed { color: blue;}
a.icon-twitter, footer#footer .colophon a.icon-twitter { color: red;}
a.icon-facebook, footer#footer .colophon a.icon-facebook { color: black;}
a.icon-google, footer#footer .colophon a.icon-google { color: green;}
a.icon-instagram, footer#footer .colophon a.icon-instagram { color: brown;}
a.icon-pinterest, footer#footer .colophon a.icon-pinterest { color: purple;}
a.icon-linkedin, footer#footer .colophon a.icon-lindedin { color: orange;}

#right.widget-area {
padding: 0px; /* Adjust */
}

.dropdown-submenu > .dropdown-menu {
top: 110%;
left: 100%; /* Adjust */
}

/* Level 2 Surround */
.dropdown-menu {
background-color: lightblue ;
}
/* Level 2/3 dropdown link before hover */
.dropdown-menu > li > a {
background-color: red ;
color: white;
}
/* Level 2 dropdown link with hover */
.dropdown-menu > li > a:hover {
background-color: white !important;
color: black !important;
}

/* Level 3 Surround */
.dropdown-submenu > .dropdown-menu {
background-color: White ;
}
/* Level 2/3 dropdown link before hover */
.dropdown-menu > li > a {
background-color: skyblue ;
color: white;
}
/* Level 3 dropdown link with hover */
.dropdown-submenu > .dropdown-menu > li > a:hover {
background-color: lightgray !important;
color: Black !important;
}

CustomCSS or Child Theme style.css

CSS

/* START OF Adding a multi-line tagline */
.site-description:before {
content: \”This is an extra tagline above the existing Tagline\”;
display: block;
text-align: right;
}
.site-description:after {
content: \”This is an extra tagline below the existing Tagline\”;
display: block;
text-align: right;
}
/* END OF Adding a multi-line tagline */

/* START OF Adding a multi-line tagline */
.site-description:before {
content: \”The Hurwitz Law Firm, P.C. \”;
display: block;
text-align: center;
}
.site-description:after {
content: \”(212) 390-8401\”;
display: block;
text-align: center;
}
/* END OF Adding a multi-line tagline */

Adding a widget area before the built-in zone

PHP

add_filter( \’tc_footer_widgets\’, \’my_footer_widgets\’);
function my_footer_widgets( $default_widgets_area ) {
$new_widgets_area = array(\’footer_four\’ => array(
\’name\’ => __( \’Footer Widget Area Four\’ , \’customizr\’ ),
\’description\’ => __( \’Just use it as you want !\’ , \’customizr\’ )
) );
return array_merge($new_widgets_area , $default_widgets_area);
}

// Adds a class to style footer widgets
add_filter( \’footer_four_widget_class\’, \’my_footer_widget_class\’);
function my_footer_widget_class() {
return \’span12\’;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14
add_filter( \’tc_footer_widgets\’, \’my_footer_widgets\’);
function my_footer_widgets( $default_widgets_area ) {
$new_widgets_area = array(\’footer_four\’ => array(
\’name\’ => __( \’Footer Widget Area Four\’ , \’customizr\’ ),
\’description\’ => __( \’Just use it as you want !\’ , \’customizr\’ )
) );
return array_merge($new_widgets_area , $default_widgets_area);
}

// Adds a class to style footer widgets
add_filter( \’footer_four_widget_class\’, \’my_footer_widget_class\’);
function my_footer_widget_class() {
return \’span12\’;
}

The 1-14 in the functions.php will not help. You’ve cut & paste from the snippet incorrectly. Delete those for a start.

How is this?

.navbar-wrapper .navbar h2, h2.site-description,
.tc-header .brand .site-title {
font-family: \”squada one\”;
}

/* CENTER TAGLINE */
.navbar-wrapper .navbar.resp h2 {
display: block;
text-align: center;
margin: px 20%; /* Adjust +/- % if needed */\
}

/* START OF Adding a multi-line tagline */
.site-description:before {
content: “The Hurwitz Law Firm, P.C. “;
display: block;
text-align: center;
}

.site-description:after {
content: “(212) 390-8401”;
display: block;
text-align: center;
}
/* END OF Adding a multi-line tagline */

#right.widget-area {
padding: 0px; /* Adjust */
}

.colophon {
background: transparent!important;
}
#footer {
background: skyblue!important;
}

.dropdown-submenu > .dropdown-menu {
top: 110%;
left: 100%; /* Adjust */
}

/* Level 2 Surround */
.dropdown-menu {
background-color: lightblue ;
}
/* Level 2/3 dropdown link before hover */
.dropdown-menu > li > a {
background-color: red ;
color: white;
}
/* Level 2 dropdown link with hover */
.dropdown-menu > li > a:hover {
background-color: white !important;
color: black !important;
}

/* Level 3 Surround */
.dropdown-submenu > .dropdown-menu {
background-color: White ;
}
/* Level 2/3 dropdown link before hover */
.dropdown-menu > li > a {
background-color: skyblue ;
color: white;
}
/* Level 3 dropdown link with hover */
.dropdown-submenu > .dropdown-menu > li > a:hover {
background-color: lightgray !important;
color: Black !important;
}