Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – inline-block doesn't prevent menu elements from overlapping when minimizing browser

I have created a menu that each link in it has the same ID #menuu and the class .menu-item. I haven’t written any HTML because it was created with a live page builder.

I have the following CSS:

#menuu { 
text-decoration: none; 
color: #0B1B70; 
} 

.menu-item-text {
    -webkit-transition: border 200ms ease-out; 
-moz-transition: border 200ms ease-out; 
-o-transition: border 200ms ease-out; 
transition: border 200ms ease-out; 
border-bottom: 2.11 pxpx solid transparent; 
border-top: 2.11 pxpx solid transparent; 
padding: 0px; 
height: 35px 
}


#menuu:hover .menu-item-text, 
#menuu:focus .menu-item-text, 
#menuu:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

.active { border-bottom: 2.11px solid #61f6ff !important; 
border-top: 2.11px solid #61f6ff !important; }

#menuu
{
min-width: 60pxpx;
max-width: 235.97px;
width: 100%;
padding-left: 5%;
padding right: 5%;
white-space: nowrap;
position: inline-block
display: flex;
justify-content: center;
align-items: center;

}

I want to prevent the menu items from overlapping each other when minimizing the browser’s width. Right now they all go to the center of the page, covering each other. You can inspect it here: mayabarber.co.il. Display:inline block isn’t working for some reason.

Thanks!

Tags:

2

Answers


  1. 0

    As you can see in the image, there are some inline-styles being applied to the elementor-element and that is making the overlapping issue. But I think that’s dynamic on page load after calculating the page width and you have nothing to do with this. But what you can do is by overriding this style.

    enter image description here

    Login or Signup to reply.
  2. 0

    First problem : do not use duplicate ID’s = do not use an id more than once on a page. So remove all the #menuu id’s and style the classes instead.

    The menu is on the same row with some widgets ( for eg. social icons, phone no etc. ) that’s why it doesn’t have enough space.

    You can solve your problem in different ways ( not sure exactly which would apply best in your case ) using media queries for 992px ( where the problems start )

    @media only screen and (max-width:992px) {
    styles here
}

    • changing the font-size of the menu items and/or the widget text
      font-size

    • hide the widgets alltogether display:none

    • change the widths of the colums to have 3 on one row or whatever you
      like, for eg: .elementor-166 .elementor-element.elementor-element-462f96df { width:33.33%}

    • make all columns 100% width, as it happens when you pass 768px for
      eg .elementor-column { width:100%!important;}

    Anyway, my guess is that you can solve this with media queries and different styles depending on the screen size.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search