Hamburger crisis

[OBXKH]

please see

Document

forallthetime.com

having trouble placing the hamnurger

how can i adjust the placement of the hamburger?

i tried myself

thanks!

 

[VBService]

First, the <span> element should not be used as a clickable element.

<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>

use for example <button> in that way

<button style="font-size: 30px; cursor:pointer; border: none; background: none;" onclick="openNav()">☰</button>

or <a>

<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

<a href="#" class="closebtn" onclick="closeNav()">×</a>

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 8px;
    font-size: 36px;
    margin-left: 5px;
    padding: 4px; 
}

 

[OBXKH]

thanks!

please see

Document

forallthetime.com

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!

 

[OBXKH]

update

Document

forallthetime.com

 

[VBService]

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

<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

.hamburger-button {
  position: fixed;
  top: 6rem; 
  left: 1rem; 
  font-size: 30px; 
  border: none; 
  background: none; 
  text-decoration: none; 
  color: black;
}

<a href="#" class="hamburger-button" onclick="openNav()">☰</a>

 

[OBXKH]

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

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

thanks for helping me!

many thanks!

 

[VBService]

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

on the hover, i get a wihte background / color

i would like to fix that

try

.sidenav .closebtn {
    position: absolute;
    top: 8px;
    right: 25px;
    font-size: 36px;
    padding: 0;
}
.sidenav .closebtn:hover {
    background-color: transparent;
    color: white;
}

 

[OBXKH]

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

flex

i get the desired result, but loose the code that adjusts the hamburger

i hope i am clear!

thank you!