CMS Development

ARippin
Member

Navigation Menu Dropdowns

How can I style how the dropdown looks? All left aligned and with a background color! 

0 Upvotes
2 Replies 2
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Navigation Menu Dropdowns

Hi @ARippin ,

<div class="cl_nav_column custom-menu-primary">
{% menu id="{{ module.menu }}" %}
</div>

<style type="text/css">

.mobile_top_bar {
width: 100%;
display: block;
padding: 0 36px 0;
margin-top: 0;
float: left;
}
.mobile_top_bar .phone_no{ border: 0; padding: 0; width: 100%;
margin-bottom: 10px;}
.mobile_top_bar .login{ border: 0; padding: 0; }
.mobile_top_bar .phone_no span a{ font-size: 18px; }
.mobile_top_bar .login a { font-size: 18px;}
.mobile_top_bar .mobile_lang .header__language-switcher.header--element {
display: block;
border: 0;
padding: 0;
float: left;
width: 100%;
}

.mobile_top_bar .mobile_lang .header__language-switcher.header--element .hs_cos_wrapper{
display: inline-block;
margin: 0;
padding: 0;
overflow: inherit;
}

.mobile_top_bar ul.lang_list_class {
position: relative;
}

.mobile_top_bar .header__language-switcher .lang_list_class li a{
font-size: 14.22px;
font-weight: 300;
}

.mobile_top_bar .mobile_lang .lang_list_class{
-webkit-transform: translateX(0);
transform: translateX(0);
margin: 0;
padding: 0;
left: 0;
}
.mobile_top_bar .mobile_lang .lang_list_class li {
padding: 0 0 14px 0!important;
font-size: 18px;
}
.mobile_top_bar .header__language-switcher .lang_switcher_class{ width: 100%; }
.header_top{ display: none; }

svg.mobile-menu-icon {
max-width: 30px;
height: 100%;
display: block;
}

.mobile-menu-icon path {
-webkit-transition: opacity .1s ease-in-out,-webkit-transform .3s ease-in-out;
transition: opacity .1s ease-in-out,-webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out,opacity .1s ease-in-out;
transition: transform .3s ease-in-out,opacity .1s ease-in-out,-webkit-transform .3s ease-in-out;
}

.open .mobile-menu-icon path:nth-of-type(1) {
-webkit-transform: rotate(-45deg) translateY(23px) translateX(-28px) scale(1.28);
transform: rotate(-45deg) translateY(23px) translateX(-28px) scale(1.28);
}
.open .mobile-menu-icon path:nth-of-type(2) {
opacity: 0;
}
.open .mobile-menu-icon path:nth-of-type(3) {
-webkit-transform: rotate(45deg) translateY(-35px) translateX(0px) scale(1.18);
transform: rotate(45deg) translateY(-35px) translateX(0px) scale(1.18);
}

.header .header__column .header__row-2 .header__navigation.header--element {
padding-left: 0;
}
.mobile_top_bar .header_signup_btn {
position: static;
width: 100%;
text-align: center;
margin-top: 0;
display: block;
}
.mobile_menu_header{
position: absolute;
right: 70px;
top: 12px;
display: block;
z-index: 1;
}
.mobile_menu_header a{
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 13px;
font-weight: bold;
letter-spacing: -0.08px;
line-height: 25px;
}
.header_signup_btn{ display: none; }

.header__paystone_main .submenu.level-3 .menu-item .menu-link span {
display: none;
}

.mobile_top_bar .login_mobile {
display: inline-block;
width: 100%;
text-align: left;
}
.mobile_top_bar .login_mobile .hs_cos_wrapper{ padding-top: 0; justify-content: start;}

.mobile_top_bar .login_mobile .hs_cos_wrapper .Payston_-_Login_Link a{
color: rgb(5, 27, 53);
font-size: 14.22px;
font-weight: 300;
letter-spacing: -0.09px;
text-decoration: none;
}

.mobile_top_bar .header_signup_btn .hs_cos_wrapper { padding-top: 30px;}
.mobile_top_bar .header_signup_btn .hs_cos_wrapper .Payston_-_Sing_Up_Link {
width: 100%;
}

ul.submenu.level-1 li:first-child>.submenu.level-2>li:nth-child(3){
display: none;
}
ul.submenu.level-1 li:first-child>ul.submenu.level-2 {
padding-bottom: 27px;
}
ul.submenu.level-1 li:first-child>.submenu.level-2>li:first-child ul.submenu.level-3 li:last-child {
display: block;
}
ul.submenu.level-1 li:first-child>.submenu.level-2>li:first-child ul.submenu.level-3 li:last-child span,
ul.submenu.level-1 li:first-child>.submenu.level-2>li:first-child ul.submenu.level-3 li:last-child p{
display: none;
}

ul.submenu.level-1 li:first-child>.submenu.level-2>li:first-child ul.submenu.level-3 li:last-child a{
color: #467dec !important;
font-family: 'HKGrotesk-SemiBold';
font-size: 16px;
font-weight: 600;
letter-spacing: -0.1px;
line-height: inherit;
}

ul.submenu.level-1 li:first-child>.submenu.level-2>li:first-child ul.submenu.level-3 li:last-child a h4{
color: #467dec !important;
letter-spacing: -0.1px;
line-height: inherit;
text-transform: capitalize;
font-size: 16px;
}



.header.nav-down{
position: static;
top: 0px;
left: 0px;
right: 0px;
z-index: 9999;
transform: inherit;
transform: inherit;
-webkit-transform: inherit;
-moz-transform: inherit;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}

.header.nav-up {
transform: inherit;
transform: inherit;
-webkit-transform: inherit;
-moz-transform: inherit;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children .hs-menu-children-wrapper li a>span{
display: none;
}








}

@media (max-width: 480px) {





}
</style>

<script type="text/javascript">
$(document).ready(initPage);

function initPage(){
initDOM();
}

/* DOM Functions */
function initDOM(){
//Mobile Menu
$('.custom-menu-primary').addClass('js-enabled');
$('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger"><i></i></div>');
$('.custom-menu-primary .flyouts .hs-item-has-children > a').after(' <div class="child-trigger"><i></i></div>');
$(".custom-menu-primary ul li.hs-menu-depth-1.hs-item-has-children").append("<span class='fa fa-angle-down'></span>");
$(".custom-menu-primary ul li.hs-menu-depth-2.hs-item-has-children").append("<span class='fa fa-angle-right'></span>");
$('.mobile-trigger').click(function() {
$(this).next('.custom-menu-primary .hs-menu-wrapper').slideToggle(250);
$('body').toggleClass('mobile-open');
$('.child-trigger').removeClass('child-open');
$('.hs-menu-children-wrapper').slideUp(250);
/*
var wHeight = $(window).height() - 100;
$('.hs-menu-wrapper ul:first-child').css({
'height' : wHeight
});*/
return false;
});
$('.child-trigger').click(function() {
$(this).parent().siblings('.hs-item-has-children').find('.child-trigger').removeClass('child-open');
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
$(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.child-trigger').removeClass('child-open');
$(this).toggleClass('child-open');
return false;
});




}

</script>


Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

0 Upvotes
Indra
Guide | Elite Partner
Guide | Elite Partner

Navigation Menu Dropdowns

Hi @ARippin,

 

For styling a dropdown it's best to target the spesific HTML element to style it with CSS.

You can go into your desiger tools and find the linked .css file for that spesific page.

 

HubSpot's HTML markup for the navigation can't be changed. So if you only want to change one specific dropdown, you should target your submenu with the CSS selector :nth-child.


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution