CMS Development

lassesaari
Member

How to make active (current) branch submenu disappear when hovering over another menu item?

Hi, 

Page in question here: http://www-epassi-fi.sandbox.hs-sites.com/fi/tyonantajalle

 

I'm trying to have the current active branch submenu disappear when hovering over another element, but can't find the way to do so, really have no clue how to do it. 

Also, when hovering over the current active submenu, it swings a little bit, don't know why. 

Any help from here? What should I have / change in my CSS? Example below.

Thank you very much!

My full "Menu Bar" CSS at the moment...

.menu-link a {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 16px;
color: #4D5D70;
opacity: 0.5;
}

.menu-link a:hover {
    color: #30363F;
  opacity: 1;
}

.menu-bar .hs-menu-wrapper ul,
.menu-bar .hs-menu-wrapper li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-bar .hs-menu-wrapper li {
  float: left;
}

.menu-bar .hs-menu-wrapper a {
    display: block;
    position: relative;
    color: #4D5D70;
    font-style: normal;
  font-weight: 400;
  font-family: Inter;
  line-height: 20px;
  font-size: 20px;
  letter-spacing: -0.02em;
  opacity: 0.5;
}

@media (max-width: {{ media_md }}px) {

.menu-bar .hs-menu-wrapper a {
font-size: 16px;
letter-spacing: -0.011em;
line-height: 22px;
    }
}

.menu-bar .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.active a

{

 color: #ffffff;
  background: #000000;
  opacity:1;
  
}


.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
  

  background: #ffffff;
  color: #30363F;
  opacity:1;
  
}
.menu-bar .hs-menu-wrapper a:focus {
    outline: 0;
}

.menu-bar .hs-menu-wrapper a:hover {
    color: #30363F;
  opacity: 1;
}

.menu-bar .hs-menu-wrapper > ul {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

.menu-bar .hs-menu-wrapper > ul:after {
    content: '';
    display: table;
    clear: both;
}

.menu-bar .hs-menu-wrapper > ul > li {
    float: left;
    margin-right: 25px;
}

.menu-bar .hs-menu-wrapper > ul > li:last-child {
    margin-right: 0;
}

.menu-bar .hs-menu-wrapper > ul > li > a {
    padding: 10px 10px;
    font-weight: {{ text_bold_variant }};
    text-decoration: none;
}

.menu-bar .hs-menu-wrapper > ul > li:hover > a {
    position: relative;
    z-index: 101;
}

.menu-bar .hs-menu-wrapper > ul > li.active > a:before {
    content: '';
    display: block;
    height: 0px;
    position: absolute;
    bottom: 10px;
    z-index: 0;
    background: #627287;
    {{ radius(corners, '0', '3px', '3px') }}
    transition: .4s ease-in-out;
    pointer-events: none;
  visibility: hidden; !important
}

.header-wrapper .menu-bar .hs-menu-wrapper > ul > li > a:before,
.sticky-header .menu-bar .hs-menu-wrapper > ul > li > a:before {
    {% if header_background_color == theme_color %}
        background: {{ header_text_color }};
    {% endif %}
}

.white-content .menu-bar .hs-menu-wrapper > ul > li > a:before {
    background: #fff;
}

.menu-bar .hs-menu-wrapper > ul > li > a:before,
.menu-bar.first-not-active .hs-menu-wrapper > ul > li.active:first-child > a:before,
.menu-bar.first-not-active-branch .hs-menu-wrapper > ul > li.active-branch:first-child > a:before {
    left: 80%;
    right: 80%;
    opacity: 0;
    visibility: hidden;
}

.menu-bar .hs-menu-wrapper > ul > li:hover > a:before,
.menu-bar .hs-menu-wrapper > ul > li.active > a:before,
.menu-bar .hs-menu-wrapper > ul > li.active-branch > a:before,
.menu-bar.first-not-active .hs-menu-wrapper > ul > li.active:first-child:hover > a:before,
.menu-bar.first-not-active-branch .hs-menu-wrapper > ul > li.active-branch:first-child:hover > a:before {
    left: 0;
    right: 0;
    opacity: 1;
    visibility: visible;
}

.menu-bar .hs-menu-wrapper ul ul {
    max-width: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    z-index: 100;
    -webkit-backface-visibility: hidden;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, .1);*/
    /*box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .3);*/
   /* box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.10), 0 10px 30px -5px rgba(0, 0, 0, .10);*/
    /* {{ radius(corners, '0', '4px', '4px') }}  */
}

.menu-bar .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper {
    overflow: visible;
    visibility: visible;
      float: left;
   max-width: 100%;
  margin-top: 20px;
}


.menu-bar .hs-menu-wrapper li:hover > ul {
    max-width: none;
    height: auto;
    overflow: visible;
    visibility: visible;
}

.menu-bar .hs-menu-wrapper li:hover + ul li.hs-item-has-children.active-branch {
    overflow: hidden;
    visibility: hidden;
   max-width: 0;
  height: 0;
}

.menu-bar .hs-menu-wrapper li:hover ul li.hs-item-has-children.active-branch {
    overflow: hidden;
    visibility: hidden;
   max-width: 0;
  height: 0;
}

.menu-bar .hs-menu-wrapper li:hover ~ ul li.hs-item-has-children.active-branch {
    overflow: hidden;
    visibility: hidden;
   max-width: 0;
  height: 0;
}


.menu-bar .hs-menu-wrapper > ul > li > ul > li:first-child:before {
}

.menu-bar .hs-menu-wrapper > ul > li > ul > li:first-child:hover:before,
.menu-bar .hs-menu-wrapper > ul > li > ul > li.active:first-child:before,
.menu-bar .hs-menu-wrapper > ul > li > ul > li.active-branch:first-child:before {

}

.menu-bar .hs-menu-wrapper ul ul li:first-child:hover:before,
.menu-bar .hs-menu-wrapper ul ul li.active:first-child:before,
.menu-bar .hs-menu-wrapper ul ul li.active-branch:first-child:before {

}

.menu-bar .hs-menu-wrapper ul ul li a {

    padding: 14px 0px;
    background: #FFFFFF;
    color: #000000;
   margin: 0px 12px;
    /* -webkit-transform: translateZ(0); */
    /* Uncomment above if required --> a fix for Safari https://stackoverflow.com/questions/7947385/hovering-over-css-transition-in-safari-lightens-certain-font-color */
}

/* A fix for IE11, 1px weird space */
.is-ie11 .menu-bar .hs-menu-wrapper ul ul li:not(:first-child) > a {
    margin-top: -1px;
}


.menu-bar .hs-menu-wrapper ul ul li.hs-item-has-children > a {
    padding-right: 25px;
}

.menu-bar .hs-menu-wrapper ul ul li.hs-item-has-children > a:before {
    font-weight: 900;
    position: absolute;
    right: 15px;
    font-family: {{ font_awesome }};
}

.menu-bar .hs-menu-wrapper ul ul li:hover > a
,
.menu-bar .hs-menu-wrapper ul ul li.active > a,

.menu-bar .hs-menu-wrapper ul ul li.active-branch > a 
{
border-bottom: 1px solid #30363F;
  padding-bottom: 4px;
 transition: width 0.3s ease 0.2s, left 0.3s ease 0.2s;
}


.menu-bar .hs-menu-wrapper ul ul ul {
    top: 0;
    left: 100%;
}

.menu-bar .hs-menu-wrapper > ul > li > ul > li > ul {
    margin-top: 1px;
}

.menu-bar .hs-menu-wrapper > ul > li > ul > li:first-child > ul {
    margin-top: 0;
}

.menu-bar .hs-menu-wrapper ul ul ul li:first-child:before {
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    position: absolute;
    top: 15px;
    left: -5px;
    background: {{ dropdown_background_color }};
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    transition: .2s ease-in-out;
}

.menu-bar .hs-menu-wrapper .hs-menu-flow-horizontal ul li{
  float:left;
}

.menu-bar .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
  font-size: 16px;
  font-weight: 400;
}

@media (max-width: {{ media_md }}px) {

.menu-bar .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
font-size: 13px;

    } }
.menu-bar .hs-menu-wrapper.hs-menu-flow-horizontal> ul li.hs-item-has-children.active-branch:hover > ul.hs-menu-children-wrapper
 {
margin-top: 0px;
   position: absolute;
}

.menu-bar .hs-menu-wrapper.hs-menu-flow-horizontal> ul li.hs-item-has-children:hover > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper
 {
display: none;
}

  

0 Upvotes
3 Replies 3
Anton
Thought Leader

How to make active (current) branch submenu disappear when hovering over another menu item?

Hi @lassesaari

if you want the dropdown to appear only on hover of the parent menu ite you should delete(or deactivate) following two lines

.menu-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children.active-branch>ul.hs-menu-children-wrapper {
    /* overflow: visible; */
    /* visibility: visible; */
    float: left;
    max-width: 100%;
    margin-top: 20px;

 

hope this helps, 

Anton

Anton Bujanowski Signature
0 Upvotes
lassesaari
Member

How to make active (current) branch submenu disappear when hovering over another menu item?

So I try to disappear the sub-menu from the active branch if another top menu item is hovered - but how?

A picture to help you understand...

hover disappear.png

0 Upvotes
lassesaari
Member

How to make active (current) branch submenu disappear when hovering over another menu item?

Hi Anton, thanks for your help!

I'd like to keep the current active-branch submenu always visible when visiting a page under that active branch. That's why I have those lines over there.

BUT - When user would hover over another Top-Menu, that is not part of the active branch, this current page submenu would disappear. Would that be possible somehow?

Thanks! - Lasse


0 Upvotes