Using Bootstrap with Advanced Menu

[jonlcrow]

My designer created custom CSS using bootstrap for navbar and drop-down classes (see below). But when I used the advanced menu it is using hs-menu classes. Is there any way to override those classes and just use the bootstrap ones? Or to translate his css classes into hs-menus classes?

.navbar-inner {
     min-height: 40px;
     padding:10px 0px;
     background-color: #ffffff;
     background-image: none;
     border: none;
     border-radius: 0;
     box-shadow: none;
}
 .navbar .brand {
     position: fixed;
     overflow: visible;
     padding-left: 0;
     height: auto;
}



 .navbar .nav > li > a {
     float: none;
     padding: 10px 15px 10px;
     color: #007fa3;
     text-decoration: none;
     text-shadow: none;
     font-size: 1.1rem;
     vertical-align: middle !important;
}
 .navbar .nav > li > a:focus, .navbar .nav > li > a:hover {
     color: #007fa3;
     text-decoration: underline;
     background-color: none;
}
 .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
     color: #007fa3;
     text-decoration: none;
     background-color: #ffffff;
     box-shadow: none;
     font-weight: bold;
}
 .navbar .btn-navbar {
     color:#007fa3;
     background-color:#ffffff;
     background-image: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
     text-shadow: none;
     border: none;
}
 .navbar .btn-navbar .icon-bar {
     background-color:#007fa3;
     box-shadow: none;
     border-radius: 3px;
     height: 7px;
     width: 40px;
}
 .navbar .btn-navbar:hover, .navbar .btn-navbar:focus, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
     background-color: transparent;
     outline: none;
}
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
     color: #222222;
     text-decoration: none;
     background: none;
     background-color: #e5e5e5 !important;
}
 .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
     color: #222222;
     text-decoration: none;
     background: none;
     background-color: #ffffff;
}

[EricSalvi]

Hey @jonlcrow,

The HubSpot Bootstrap is just a modified and stripped down version of Bootstrap 2.
https://designers.hubspot.com/docs/cos/the-cos-responsive-grid
So overriding the HubSpot CSS with your own most likely will not work.

The only thing you could probably do is your other suggestion by using your CSS but using the HubSpot selectors for the menu when using an advanced menu module.

https://designers.hubspot.com/docs/cos/hubspot-menu-markup

I hope this helps.