After designing a menu using a website builder with custom CSS, I found that the HTML code generated automatically by the builder needed some tweaking. Upon inspecting the code, I discovered the following structure:
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-row">
<div data-id="27de853d" class="elementor-element elementor-element-27de853d elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
<div class="elementor-column-wrap">
<div class="elementor-widget-wrap">
</div>
</div>
</div>
<div data-id="52e1a94f" class="elementor-element elementor-element-52e1a94f elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
<div class="elementor-column-wrap">
<div class="elementor-widget-wrap">
</div>
</div>
</div>
... (more elements here)
</div>
</div>
#menuu {
text-decoration: none;
color: #0B1B70;
-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: 1px solid transparent;
border-top: 1px solid transparent;
padding: 3px 0;
height: 30px
}
#menuu:hover,
#menuu:focus,
#menuu:active {
border-bottom: 2px solid #61f6ff;
border-top: 2px solid #61f6ff;
}
.active {
border-bottom: 2px solid #61f6ff !important;
border-top: 2px solid #61f6ff !important;
}
I encountered an issue where the text length was affecting the border width, causing it to extend longer than necessary. How can I adjust this using CSS without interfering with the menu functionality? I attempted using inline block, but it caused disruptions to the menu behavior.
For reference, visit this page: