Animated resizing navigation icon

As I work on a therapy website, I've successfully created an animated HTML, CSS, and JavaScript nav toggler that works on all devices. However, I'm facing difficulty in making it smaller without impacting the alignment of the cross after activation. Here's the code:

<!Doctype html>
    <html lang="en">
    ...

I'm trying to resize this hamburger toggler to make it suitable for both web and mobile use. Despite adjusting the width and height of .btnMenu02 and altering the height of the span lines within it, the cross icon ends up looking misaligned. Is there a way to shrink this toggler without affecting the cross icon's alignment?

javascripthtmlcssbootstrap-5hamburger-menu

Answer №1

If you can include screenshots of your progress after making changes, it would be very beneficial.

After some modifications, I successfully adjusted the following code:

.btnMenu02 {
         width: 50px;
         height: 50px;
         background-color: #000;
    }
  .btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
         display: block;
         width: 90%;
         height: 4px;
         margin: 6px auto;
         content: '';
         background-color: #fff;
         border-radius: 4px;
         transition: all 0.2s ease-in-out;
    }

The issue causing the odd appearance upon resizing was mainly due to margin: 12px auto;, which led to the lines extending beyond the box.

In addition, since the size was reduced, adjusting the line width to 90% helped maintain proper alignment.

To achieve the desired size, ensure that the height and margin values are proportionate to the background's width and height.

For a complete example, refer to the provided HTML and CSS snippets.

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

Using PHP to perform live calculations with arrays in real time

Currently, I am working on developing a new system for a client that allows them to create bookings and invoices to send to their clients. One specific requirement my client has is the need for a table column to be added below the container columns in whi ...

javascriptphphtmlajax

Flashing border of Bootstrap input occurs when clicking away from a modified input that is in focus

In my form, I have implemented a custom floating placeholder/label for an input field. I wanted to customize the focus behavior by removing shadow and modifying the borders. The current code is almost working as intended: .paddings{ padding: 5rem; } i ...

htmlcsstwitter-bootstrap-3

Extracting outer td data from a td element containing an inner table using JSoup

Currently, I am utilizing JSoup for the purpose of web scraping. Within my webpage, there is a table with the classname .chart, containing rows (tr) and data cells (td). However, some of these td elements also include nested tables with additional rows and ...

htmljsoup

Customizing the colors of an Ant Design header

I am currently attempting to modify the background color of the entire header in antdesign. I believe the file containing the default settings can be found here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less Upo ...

cssreactjsnext.jslessantd

utilize text offsets to insert tags within strings

I've been facing challenges with using JavaScript string methods and regular expressions. It seems like I might be missing something obvious here. Please forgive me if I'm repeating the question asked by tofutim in more detail, which can be found ...

javascriptjqueryregextextoffset

Encountering difficulties setting cookies within the app router in Next.js

I've been diving into next.js and I'm trying to figure out how to set a cookie using the code below. However, I'm encountering an error: "Unhandled Runtime Error. Error: Cookies can only be modified in a Server Action or Route Handler." I ...

javascriptnext.jscookies

Moving back and forth within a range

One simple yet commonly encountered task involves looping through a range forwards and backwards: var currentIndex = 0; var range = ['a', 'b', 'c', 'd', 'e', 'f']; function getNextItem(directi ...

javascriptarraysshorthand

Retrieve the tweets from the next Twitter user in the Array using blogger.js

I am working on a project that involves a javascript array of Twitter usernames. Using blogger.js, I successfully load the first username along with their last 5 tweets. Now, I am looking to create HTML buttons or links for "previous" and "next" in order ...

javajavascriptjquery

When using Selenium WebDriver, the WebElement .findElement method can sometimes cause errors in JavaScript

Successfully locating the element, I am able to retrieve the text within the container. However, when attempting to fetch the titles of products by iterating through the array of WebElements inside the container, the .findElement() consistently throws an e ...

javascriptseleniumselenium-chromedriver

What could be the reason for my new course not being recognized?

Looking to modify the behavior of a button where, when clicked, it hides a specific div element, changes its text display, and toggles between classes using addClass/removeClass for subsequent click events. Unfortunately, the intended functionality is not ...

jquerycsshtml

Change the default parameter value when optional parameters are present

I am working with a function that has four parameters, where the first parameter is mandatory, the second and third are optional, and the fourth has a default value: class MyClass { static myFunc(param1: string, param2? : string, param3? : string, param ...

javascripttypescript

What is the total amount within a specified date range when retrieved as JSON?

Consider the following JSON structure: { "timesheets": [ { "user": { "username": "erik", "first_name": "Erik", }, &q ...

javascriptdjangovue.jsdjango-rest-framework

Here are the steps to input keys into an element such as `<textarea name="body" placeholder="Start typing...`

Presented below is an element: <textarea name="body" placeholder="Start typing..." tabindex="0" pwa2-uuid="EDITOR-C10-C4D-8CC58-82F" pwa-fake-editor="" spellcheck="false" style="white-spac ...

pythonhtmlselenium

Retrieving a Collection of Items Generated in the Past Day from a Specific Dataset Using JavaScript

I have been tasked with extracting a specific set of arrays from given data based on a 24-hour time frame using the timestamps provided. I initially attempted the code below, but unfortunately, it kept returning the same data to me. I suspect there may be ...

javascriptnode.jsreactjsalgorithmvue.js

Pattern matching to substitute a variable-filled string

As a newcomer to regex, I am facing an issue with working on xpath strings. My goal is to remove a specific element from the xpath string if it contains an id = myVar For example: /html/body/div[3]/div[20]/section[1]/p[5]/span[1][@id="var645932"]/span I ...

javascriptjqueryhtmlregexxpath

"JQPlot line chart fails to extend all the way to the edge of the

My jqPlot line plot looks great, but it's not extending all the way to the edge of the containing div, which is crucial for my application. I've tried adjusting all the options related to margins and padding, but there's still a noticeable g ...

javascriptjqueryhtmllayoutjqplot

Can you have two navigation bars and a picture all in one Bootstrap layout?

I have a requirement to use a single image on two different Bootstrap navbars. However, the issue is that the image appears split between the two navbars.https://i.stack.imgur.com/jUnIL.png My goal is to display the full image without it being divided bet ...

csstwitter-bootstrapnavbar

creating interconnections between input fields by employing event listeners in JavaScript

I've been experimenting with binding multiple input fields to a span element using jQuery. Specifically, I have two input fields containing integer values and the sum of these values is displayed in a span element. I want the span element to update wh ...

javascriptjquery

Ways to eliminate the bottom margin

I'm currently experimenting with bootstrap for the first time and running into a bit of an issue. I've added two horizontal lines at the top and bottom of my navbar, but there seems to be an unexpected margin at the bottom between the navbar and ...

htmlbootstrap-4navbar

Proper Functioning of Keydown Event Listener Fails in React/Next.js

I am currently developing an Image Gallery Lightroom component using React/Next.js. The functionality involves clicking on gallery images to open a modal in a react portal. The modal includes a close button and left/right arrow buttons for image navigation ...

javascriptreactjsnext.jsevent-handlingkeydown