Stop menu items from shifting when focused

I've developed a mobile hamburger menu and attempted to adjust the padding to create space between the text and the borders.

Here's the HTML:

#menu-solutions:hover .menu-item-text,
#menu-solutions:focus .menu-item-text,
#menu-solutions:active .menu-item-text {
  border-bottom: 2.11px solid #61f6ff;
  border-top: 2.11px solid #61f6ff;
  padding: 5px;
}
<div class="elementor-column-wrap elementor-element-populated">
  <div class="elementor-widget-wrap">
    <div data-id="da3c1dd" class="elementor-element elementor-element-da3c1dd elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
      <div class="elementor-widget-container">
        <div class="elementor-spacer">
          <div class="elementor-spacer-inner"></div>
        </div>
      </div>
    </div>
    <div data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="regulation-menu-mobile" data-element_type="heading.default">
      <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#regulation-mobile"><span class="menu-item-text"><span align="center">?מהי רגולציה</span></span></a></h4>
      </div>
    </div>
    <div data-id="4e7c2bc" class="elementor-element elementor-element-4e7c2bc elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
      <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#aboutmemobile"><span class="menu-item-text"><span align="center">אודות</span></span></a></h4>
      </div>
    </div>
    <div data-id="45788e2" class="elementor-element elementor-element-45788e2 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
      <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#fit-mobile"><span class="menu-item-text"><span align="center">?למי זה מתאים</span></span></a></h4>
      </div>
    </div>
    <div data-id="2a24b44" class="elementor-element elementor-element-2a24b44 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
      <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#solution-mobile"><span class="menu-item-text"><span align="center">פתרונות</span></span></a></h4>
      </div>
    </div>
    <div data-id="fcd1ddb" class="elementor-element elementor-element-fcd1ddb elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
      <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#contact-mobile"><span class="menu-item-text"><span align="center">צור קשר</span></span></a></h4>
      </div>
    </div>
    <section data-id="23d1d02" class="elementor-element elementor-element-23d1d02 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section" data-element_type="section">
      <div class="elementor-container elementor-column-gap-default">
        <div class="elementor-row">
          <div data-id="b6d5052" class="elementor-element elementor-element-b6d5052 column-contact elementor-column elementor-col-100 elementor-inner-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
              <div class="elementor-widget-wrap">
                <div data-id="4f72658" class="elementor-element elementor-element-4f72658 mobilemenucontact elementor-widget elementor-widget-text-editor" id="mobilemenucontact" data-element_type="text-editor.default">
                  <div class="elementor-widget-container">
                    <div class="elementor-text-editor elementor-clearfix">
                      <p class="makeSmall" style="text-align: center;"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33">&nbsp;<img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33"
                          height="33">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|&nbsp;<span style="color: #001a71;" data-mce-fragment="1">&nbsp;052-6582643</span></label></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

When a user clicks on one of the links, the text moves slightly down. I want the text to stay in place without moving on focus. What CSS attribute should I include?

If necessary, you can inspect the website at the following link (the issue only occurs on the mobile menu): website.

htmlcsswordpress

Answer №1

Typical text should maintain consistent spacing, styles, and utilize transparent borders:

#navigation-options .nav-item-text {
  border-bottom: 1.5px solid transparent; 
  border-top: 1.5px solid transparent;    
  padding: 10px;
}

Answer №2

Here is a helpful CSS rule you can try implementing:

#menu-solutions  .menu-item-text {
    box-sizing:border-box;
}

Have you considered removing the padding:5px on hover/focus/active states? Try this instead:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The best way to organize and position a Label and TextBox in C#

I need help styling the aspx file. The Label and TextBox elements are not aligned properly. I want the Label and TextBox to be positioned side by side with appropriate spacing. <div class="col-md-12"> <p> ...

c#cssasp.net

Utilizing jQuery to Calculate Tab Scores

Last week, my teacher and I collaborated on a fun game called rEAndom game (). The game is created using javascript, jQuery, and HTML5. One interesting feature of the game is that when you press the TAB key, a div displaying the score appears. You can chec ...

javascriptjqueryhtmlcss

The Chrome extension I created using JQuery to trigger 'keyup' events is not updating the value of the 'input' field on a website that utilizes knockout JS

I am currently working on developing a Google Chrome extension for a website that appears to be utilizing 'knockout JS'. Let's take a look at the HTML element below: <input type="text" class="form-control text-right" id="amount" autoco ...

javascriptjqueryhtmlknockout.jsgoogle-chrome-extension

Tips on showcasing Javascript filter outcomes after at least 2 characters have been entered

Currently, I have implemented a filter search box that displays results as soon as a single letter is inputted. However, due to the large amount of data that needs to be filtered through, I would like the search to only show results when a minimum of two l ...

javascripthtmlcsssearchfilter

Struggling with the elimination of bullet points in CSS navigation bars

I'm having trouble removing the bullet points from my navigation bar. I've tried using list-style-type: none and even adding !important, but it doesn't seem to work. Strangely enough, everything looks fine in Chrome, but I get an error when ...

htmlcsslistnavigation

What is the best way to incorporate several functions within a resize function?

Is it possible to incorporate multiple functions within the windows.width resize function? I have been experimenting with some code, but I would like to restrict its usage to tablet and mobile devices only, excluding laptops and PCs. Any suggestions on h ...

javascriptjqueryhtmlresponsive-design

Display the entire paragraph when hovering over it

Is there a way to make the entire paragraph appear on hover instead of just showing parts of it? I am building a website on Weebly for a school project and my knowledge is limited. I tried using the following code, but it only displays some of the content ...

htmlcsshover

What is the trick to getting an accordion to expand when hovering, rather than when clicking?

Can the accordion be set to expand when hovering instead of clicking? Also, how can a different action be triggered on click? LATEST I was specifically referring to using the jQuery UI accordion widget for this functionality. ...

javascriptjqueryhtmljquery-uiaccordion

Navigating an HTML table with Selenium and Python by scrolling down

I am currently working on a project where I need to automate scrolling down an HTML table until the last row becomes visible. The table initially displays around 20 rows and then loads more as one scrolls down. To achieve this task, I am using Selenium web ...

htmlpython-2.7selenium-webdriver

Guide to placing a basic div directly over a basic html table td

I need to create a simple html table with labels in one column and content in another. What I want to achieve is placing a div over the content td while keeping the label visible. I am looking for the most efficient way to do this, possibly making the seco ...

htmlcsstwitter-bootstrap-3

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'elipsis' }) export class ElipsisPipe implements PipeTransform { transform(text, length, clamp) { text = text || ''; clamp = clamp || '...& ...

javascripthtmlangulartypescriptprimeng

Showing a cell border when a radio button is chosen

I am working with a table that contains input/radio buttons, and I am trying to figure out how to apply a border to a specific cell when the user selects the radio button within it. This will give the appearance of the cell being selected. I am not sure ho ...

htmljquerycss

Display an Open Dialog window when a Button is clicked

On a button click, I need to display an Open Dialog box. To achieve this, I am utilizing the FileUpload control for file uploading purposes, however, I prefer not to expose it to the user and would rather display a Button instead. ...

jquerycssfile-upload

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

Hey there! I'm currently facing a CSS challenge related to Vue. Let's say I want to display multiple components using v-for, and I want to add a hover effect to each component individually. The goal is to have the hover effect only apply to the c ...

cssvue.js

problem with the picture and wrapper expanding to fill the entire width of the screen

I'm having an issue with the image I added and its hover effect. The image seems to be leaving space on both sides of the screen, even though I've included background-size: cover and width:100% in my code. Could someone please point out where I ...

htmlcssuser-interfacebootstrap-4background-image

How can I create two buttons on one line in a Struts2 form?

My form has two buttons - one for registering and the other for canceling the form. I created them using the following code: <s:submit name="cancel" key="project.button.cancel" /> <s:submit name="login" key="form.register.registerBtn" /> How ...

javahtmlcssjspstruts2

Classic leading and CSS line-height traditional styling

The CSS specification dictates that line-height should be implemented by dividing the specified value by two and applying the result both above and below a line of text. This significantly differs from the traditional concept of leading, where spacing is ...

typographycss

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlcssvue.js

A critical issue occurred: Unhandled Error - Attempting to access a non-existent function "update" in the MollieApiEndpointsSubscriptionEndpoint class within a WordPress plugin designed for

I am currently in the process of updating the webhookUrl in Mollie for a subscription. Unfortunately, the old webhookUrl is no longer functional and the original programmer who set it up is no longer part of our team. You can find the Mollie link that I a ...

phpwordpressmollieeasy-digital-downloads

Choosing an element that does not have a particular string in its colon attribute name

In my code, I have multiple elements structured like this: <g transform="matrix"> <image xlink:href="data:image/png" width="48"> </g> <g transform="matrix"> <image xlink:href="specific" width="48"> </g> <g tran ...

htmlcsstypescriptwebdriverprotractor