Hamburger crisis

Joined
Feb 15, 2021
Messages
99
Reaction score
0
please see


having trouble placing the hamnurger

how can i adjust the placement of the hamburger?

i tried myself

thanks!
 
Joined
Jul 4, 2023
Messages
510
Reaction score
63
First, the <span> element should not be used as a clickable element.
HTML:
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>

use for example <button> in that way
HTML:
<button style="font-size: 30px; cursor:pointer; border: none; background: none;" onclick="openNav()">☰</button>

or <a>
HTML:
<a href="#" style="font-size: 30px; border: none; background: none; text-decoration: none; color: black;" onclick="openNav()">☰</a>

how can i adjust the placement of the hamburger?
the same way as you treat .closebtn use position: absolute, too.


The <span> element is typically used to group and style inline elements or text within a larger document. However, it is not inherently designed to be interactive or clickable like a button. When you want to create clickable elements on a web page, it is generally recommended to use the appropriate semantic HTML element for the purpose, such as the <button> element.

Here are some reasons why the <button> element is preferable for creating clickable elements instead of using a <span>:

  1. Semantics: The <button> element carries semantic meaning for user agents, assistive technologies, and search engines. It indicates to users and developers that the element is meant to be interacted with, triggering an action when clicked. This enhances accessibility and ensures a better understanding of the document structure.
  2. Keyboard Accessibility: Buttons have built-in keyboard accessibility features. Users can navigate through interactive elements using the keyboard, and the <button> element ensures that users can easily focus on and activate the button using the keyboard's Enter or Space key.
  3. Styling: While <span> elements can be styled to look like buttons using CSS, using the <button> element provides a consistent and predictable styling foundation. This can be especially beneficial when working with different browsers and devices, ensuring a more standardized appearance.
  4. Event Handling: The <button> element is designed to handle various events, such as click events, more effectively. This can simplify the process of adding JavaScript functionality to the button, making it easier to manage and maintain interactive behavior.

    In contrast, using a <span> element for interactive purposes might not convey the intended semantics and could lead to issues related to accessibility, user expectations, and code maintainability.


BTW, When a Click is Not Just a Click

HTML:
<a href="#" class="closebtn" onclick="closeNav()">×</a>
CSS:
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 8px;
    font-size: 36px;
    margin-left: 5px;
    padding: 4px; 
}
 
Last edited:
Joined
Feb 15, 2021
Messages
99
Reaction score
0
thanks!

please see


i took your advice, still have a problem :(

please tell me where my issue is and how to fix it... the proper code itself would be most appreciated, and a brief explanation would be good too

i am trying

thanks for your time and trouble!
 
Joined
Jul 4, 2023
Messages
510
Reaction score
63
the same way as you treat .closebtn use position: absolute, too.
something like this, this is of course an example of what it could possibly look like
HTML:
<a href="#"
   style="position: fixed; top: 6rem; left: 1rem; font-size: 30px; border: none; background: none; text-decoration: none; color: black;"
   onclick="openNav()">☰</a>

or
CSS:
.hamburger-button {
  position: fixed;
  top: 6rem; 
  left: 1rem; 
  font-size: 30px; 
  border: none; 
  background: none; 
  text-decoration: none; 
  color: black;
}
HTML:
<a href="#" class="hamburger-button" onclick="openNav()">☰</a>
 
Joined
Feb 15, 2021
Messages
99
Reaction score
0
BINGO!

please https://forallthetime.com/BI-A/index.html

on the hover, i get a wihte background / color

i would like to fix that :)


and


please see

Code:
https://forallthetime.com/BI-A/index.html

i used left: 175dvh; to bring the hamburger to the right, did i do that the right way?

not sure what to call this, as my veiwport gets smaller, the hamburger stays put and goes of the screen…

i am after having the hamburger adjust to the screen itself… as the screem gets larger or smaller, the hamburger is visable, stays put

what should i do?

i appreciate the code and an explanation of what you did and how it works
:slight_smile:


thanks for helping me!

many thanks!
 
Joined
Feb 15, 2021
Messages
99
Reaction score
0
DONE!

thank you!

freindly follow up :)

so sorry!


i thought i replied to this, cnnot find that post :(

i will repeat again

tell me, why does the hamburger move as the screen gets smaller and larger?

cannot figure out how to make the hamburger stay put :(

to NOT move with the screen to the point it over laps or obscures the code benearth it

i have a problem and need your help

i noticed if i removed
Code:
flex
i get the desired result, but loose the code that adjusts the hamburger

i hope i am clear!

thank you!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Hamburger crisis 3
Max width question 1
.active 8
Margin issue 3
Image size confusion 2
Media query issue 2
Non matching code 4
Help with my navigation, please 0

Members online

No members online now.

Forum statistics

Threads
474,057
Messages
2,570,443
Members
47,115
Latest member
DorothyLus

Latest Threads

Top