Styling Drop Down Menu

SOLVE
Highlighted
New Contributor

I am trying to update my Top Menu Bar to have the drop-down ability to show some of the child pages. I've added them to the navigation menu, but it seems my CSS styling is wrong. I'm not sure how to update it to make it appear similar to the other menu. 

 

https://www.strouse.com/

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Top Contributor | Platinum Partner

Hi @dchambers,

 

Create one class to insert in module of your top bar menu with name "top-menu-bar", and increase this CSS in your CSS file.

 

.top-menu-bar ul li ul {
    width: 100%;
    background-color: rgba(221,221,221,0.95);
    padding-bottom: .625em;
    top: 3.34em;
    width: 200px;
    display: block;
    border-top: 1px solid rgba(0,146,203,0.8);
}

.top-menu-bar ul li ul li {
    display: block!important;
    -webkit-transition: opacity .4s;
    position: relative;
    z-index: 10;
    padding: 0!important;
    border-bottom: 1px solid #c5c5c5;
}

.top-menu-bar ul li ul li a {
    font-size: .875em!important;
    color: #003b65;
    line-height: 1.4!important;
    text-align: left;
    padding: 8px 15px !important;
}

Look how do in my browser after silumation in Inspect Element:

menu.PNG

 

Did this post help solve your problem? If so, please mark it as a solution.

Best Regards! Smiley Happy

9 Replies 9
Top Contributor | Platinum Partner

Hi @dchambers,

 

Create one class to insert in module of your top bar menu with name "top-menu-bar", and increase this CSS in your CSS file.

 

.top-menu-bar ul li ul {
    width: 100%;
    background-color: rgba(221,221,221,0.95);
    padding-bottom: .625em;
    top: 3.34em;
    width: 200px;
    display: block;
    border-top: 1px solid rgba(0,146,203,0.8);
}

.top-menu-bar ul li ul li {
    display: block!important;
    -webkit-transition: opacity .4s;
    position: relative;
    z-index: 10;
    padding: 0!important;
    border-bottom: 1px solid #c5c5c5;
}

.top-menu-bar ul li ul li a {
    font-size: .875em!important;
    color: #003b65;
    line-height: 1.4!important;
    text-align: left;
    padding: 8px 15px !important;
}

Look how do in my browser after silumation in Inspect Element:

menu.PNG

 

Did this post help solve your problem? If so, please mark it as a solution.

Best Regards! Smiley Happy

New Contributor

Hey @DanielSanchez 

I tried adding that code to my CSS, but something didn't translate right. When I put it in by itself, it goes to the middle with different formatting.  When I combine the two, it doesn't function like yours.  I left the combined version in for the moment. Here is a ss of the current CSS as well as a screen shot of the module.

 

.site-header {
max-width: 1600px;
margin: auto;
padding-left: 1.25em;
padding-right: 1.25em; }
@media (max-width: 768px) {
.site-header {
overflow: hidden; } }
.site-header .main-logo {
margin-top: 1.5em;
margin-bottom: 1.5em;
text-align: left;
position: relative;
z-index: 2; }
@media (max-width: 767px) {
.site-header .main-logo img {
width: 205px !important; } }
.site-header .top-menu, .site-header .bottom-menu {
text-align: right; }
@media (max-width: 991px) {
.site-header .top-menu, .site-header .bottom-menu {
display: none; } }
.site-header .top-menu ul, .site-header .bottom-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: right; }
.site-header .top-menu ul li, .site-header .bottom-menu ul li {
display: inline-block; }
.site-header .top-menu ul {
padding-top: 0.875em;
padding-bottom: 0.875em;
border-bottom: 1px solid #eae522; }
.site-header .top-menu ul li {
padding-left: 1.5625em;
padding-right: 1.5625em; }
.site-header .top-menu ul li a {
font-size: 1.125em;
line-height: 1.2222222222;
letter-spacing: 0.125em;
text-transform: uppercase;
padding: 0; }
@media (max-width: 1199px) {
.site-header .top-menu ul li a {
font-size: 0.875em; } }
.site-header .top-menu ul li:first-child {
padding-left: 0; }
.site-header .top-menu ul li:last-child {
padding-right: 0; }
.site-header .bottom-menu ul {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex; }
.site-header .bottom-menu ul li {
padding-left: 1.5625em;
padding-right: 1.5625em;
padding-bottom: 0.875em;
padding-top: 0.75em; }
.site-header .bottom-menu ul li a {
font-size: 1.375em;
line-height: 1.2272727273;
letter-spacing: 0.1022727273em;
text-transform: uppercase;
padding: 0; }
@media (max-width: 1199px) {
.site-header .bottom-menu ul li a {
font-size: 1.125em; } }
.site-header .bottom-menu ul li a:after {
display: none !important; }
.site-header .bottom-menu ul li > ul {
width: 100%;
background-color: rgba(221, 221, 221, 0.95);
padding-bottom: 0.625em;
top: 3.34em;
display: block;
border-top: 1px solid rgba(0, 146, 203, 0.8); }
.site-header .bottom-menu ul li > ul li {
display: block;
margin: 0;
padding: 0.9375em 0; }
.site-header .bottom-menu ul li > ul li:hover {
background-color: #eeeeee; }
.site-header .bottom-menu ul li > ul li:hover a {
color: #0092cb; }
.site-header .bottom-menu ul li > ul li a {
font-size: 0.875em;
color: #003B65;
line-height: 1.4;
letter-spacing: 0.1021428571em;
text-align: right;
padding-left: 1.4285714286em;
padding-right: 1.4285714286em; }
.site-header .bottom-menu ul li:last-child {
padding-right: 0; }
.site-header .bottom-menu ul > li > a:hover {
color: #0092cb; }
.site-header .bottom-menu .hs-item-has-children:hover {
background-color: rgba(221, 221, 221, 0.95); }

.top-menu-bar ul li ul {
width: 100%;
background-color: rgba(221,221,221,0.95);
padding-bottom: .625em;
top: 3.34em;
width: 200px;
display: block;
border-top: 1px solid rgba(0,146,203,0.8);
}

.top-menu-bar ul li ul li {
display: block!important;
-webkit-transition: opacity .4s;
position: relative;
z-index: 10;
padding: 0!important;
border-bottom: 1px solid #c5c5c5;
}

.top-menu-bar ul li ul li a {
font-size: .875em!important;
color: #003b65;
line-height: 1.4!important;
text-align: left;
padding: 8px 15px !important;
}Top menu.png

Reply
0 Upvotes
New Contributor

When I combine that with my current styling, nothing happens. When I make that the only styling, it goes to the middle and has the wrong format.

 

I replied previously with the CSS language, but I think it got deleted. @DanielSanchez 

Reply
0 Upvotes
Top Contributor | Platinum Partner

Hi @dchambers you class have a one ";". Remove this ";" to we can see how it will look

 

class.PNG

 

I'm waiting Smiley Happy

Reply
0 Upvotes
New Contributor

That worked splendidly! @DanielSanchez However, the lists start too low to click on it. 

 

How do I move it to directly under the list like the ones below?

Reply
0 Upvotes
Top Contributor | Platinum Partner

Hi @dchambers ,

 

I'm very glad to have helped

 

Now, to up your list of chieldren menu, change this code:

 

.top-menu-bar ul li ul {
   width: 100%;
   background-color: rgba(221,221,221,0.95);
   padding-bottom: .625em;
   top: 37px;
   width: 200px;
   display: block;
   border-top: 1px solid rgba(0,146,203,0.8);
}

 

Value 37 to top:37 will leave it that way

 

top-37.PNG

 

 

Best Regards! Smiley Happy

Reply
0 Upvotes
New Contributor

I changed it to 37px, but it still doesn't allow you to click on any of the children. When you go over "about us" and try to move the cursor down, the children disappear before you can click on them.

.top-menu-bar ul li ul {
    width: 100%;
    background-color: rgba(221,221,221,0.95);
    padding-bottom: .625em;
    top: 37px;
    width: 200px;
    display: block;
    border-top: 1px solid rgba(0,146,203,0.8);
}

.top-menu-bar ul li ul li {
    display: block!important;
    -webkit-transition: opacity .4s;
    position: relative;
    z-index: 10;
    padding: 0!important;
    border-bottom: 1px solid #c5c5c5;
}

.top-menu-bar ul li ul li a {
    font-size: .875em!important;
    color: #003b65;
    line-height: 1.4!important;
    text-align: left;
    padding: 8px 15px !important;
}
Reply
0 Upvotes
Top Contributor | Platinum Partner

Oh, really.

 

Then try change the top value to 62px and increase this line codes in your file css.

.top-menu-bar ul {
    padding: 0!important;
}

.top-menu-bar ul li a {
    padding: 20px 10px!important;
}

Did this post help solve your problem? If so, please mark it as a solution.

Best regards Smiley Happy

Reply
0 Upvotes
New Contributor

Also, is it possible to have the initial button (i.e. about us, contact us, and blog) with a background like (materials, applications, industries, and capabilities)?

Top Bar Menu Drop Down.pngAdvanced Bar Drop Down.png

Reply
0 Upvotes