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.
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)?
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;
}
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; }