Is there a way to align the Burger menu with the logo and have the menu dropdown open below the header?
I attempted to position the burger menu next to the logo, but it didn't turn out the way I thought it would. Coding in html and css is still new to me, so any guidance would be greatly appreciated!
Enclose both elements within a div and adjust the align-items or justify-content property to center
When you design your navigation menu, make sure to give the parent container a position of relative and set the drop-down menu to position absolute. This way, you can easily position it in relation to the parent element, while keeping the burger icon in its normal place within the parent container.
In your CSS, apply the position properties I mentioned and initially set the display to none for the drop-down menu. Create an additional style for when the menu is active, with a display of block.
Now, in JavaScript, target the burger icon and add an event listener for a click that toggles the active class on the menu.
// Get the burger menu
const burgerButton = document.getElementById("burgerButton");
// Get the drop-down menu
const menu = document.getElementById("dropDownMenu");
burgerButton.addEventListener("click", function(ev){
menu.classList.toggle("active");
});* {
padding: 0;
margin:0;
box-sizing: border-box;
}
.navbar {
border-bottom: 1px solid rgba(100, 100, 100, 1);
display: flex;
align-items: center;
padding: 0 10px;
position: relative;
}
.burger-icon {
cursor: pointer;
border-radius: 10px;
padding: 10px;
}
.burger-icon:hover {
background-color: rgba(0,0,0,0.5);
}
.logo {
margin: 0 1rem;
font-family: Arial;
}
.bar {
width: 25px;
height: 3px;
background-color: black;
border-radius: 3px;
margin: 5px 0;
}
.dropdown-menu {
position: absolute;
width: 200px;
display: none;
background-color: rgb(200,200,200);
top: 100%;
left: 0;
}
.dropdown-menu ul {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.dropdown-menu ul li {
width: 100%;
padding: 10px 0;
text-align: center;
}
.dropdown-menu ul li:hover {
background-color: rgb(180,180,190);
}
a {
color: black;
text-decoration: none;
}
.active {
display: block;
}<header class="navbar">
<!-- Burger icon -->
<div class="burger-icon" id="burgerButton">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<h2 class="logo">
Logo here
</h2>
<!-- Drop-down menu -->
<div class="dropdown-menu" id="dropDownMenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">etc</a></li>
</ul>
</div>
</header>I am currently developing a website for writing books, primarily using php. I have implemented a jQuery function that, upon clicking the "New Chapter" button, triggers an AJAX function along with various other JS/jQuery events. One of these events is inten ...
Exploring D3 for the first time, I am working on a basic example to grasp the concept of data binding. My setup includes an array of colors, a function to add a color, and a function to remove a color based on index. However, I'm facing issues with t ...
ISSUE I am facing a challenge in calculating the total values of select inputs based on the radio button selected initially. Each radio button corresponds to different select inputs with their own data-price values. Once a radio button is chosen, the div ...
I'm currently working on a website and I'm facing an issue with the transition not functioning as expected. The problem persists even when the 7.css stylesheet is removed and interestingly, the transition works fine when using window:hover. My a ...
I've been working on a CSS toggle for a div with className toggling. My approach involves using redux to manage the boolean state. Using the redux chrome extension, I can see that the state is indeed changing but the div remains invisible. If you have ...
I've been working on creating a specific layout: My goal is to have the blue column move under the red column when the page size is reduced. No matter what I attempt, the red box keeps trying to match the height of the blue box. Check out my code h ...
Is it possible to save changes made to HTML elements in Chrome/Firefox inspector directly to a local file on my desktop? ...
Is it possible to have multiple range sliders on the same page? Currently, all inputs only affect the first output on the page. Check out an example here: http://codepen.io/andreruffert/pen/jEOOYN $(function() { var output = document.querySelectorAl ...
I need help with a CSS issue involving hiding one div on mouse hover and showing another instead. I attempted to achieve this using pure CSS, but both divs end up hidden. Would jQuery be necessary for this task? Below is the CSS/HTML code I wrote: .r ...
I'm seeking guidance on how to incorporate a custom feature (including a textbox and a button) onto my WordPress homepage. My goal is to create an area where users can input a code into a textbox. Here's the challenging part: Once the user click ...
Hello there! I am currently exploring a potential scenario. When viewing on a desktop or laptop, the layout should look like this: <div class="col-md-3"> sidebar </div> <div class="col-md-9"> article </div> On a smaller screen, ...
I am having difficulty assigning an id to components. Scenario 1: - Trying to assign an id to an HTML component. <h1 id="demo-h1">Demo Heading</h1> Assigning id to HTML component Scenario 2: - Attempting to assign an id to a componen ...
I'm a beginner in Python, working on a web crawler to extract text from articles online. I'm facing an issue with the get_text(url) function, as it's returning extra unnecessary text along with the main article content. I find this extra te ...
Can someone help me with a CSS issue I'm experiencing? Here is my code: <div class='test'> <div>test 1</div> <div>test 2</div> </div> <div class='test'> <div>test 3&l ...
I am currently designing a responsive webpage featuring images of people's faces placed next to descriptive text. At smaller screen widths, everything looks perfect. However, as the page widens, the text for one person starts next to the image of the ...
click here to view the image ...
I have successfully retrieved data from a database and displayed it in a table. Now, my goal is to enable editing of a specific field within a row and save the updated value back into MySQL. Here is the code snippet that includes displaying the data in th ...
What is the best way to automatically assign a value of 0 to my input field when the user leaves it blank? Should I use an if statement { } else { } ...
I am currently working on my first next.js project, transitioning from create-react-app, and I've encountered an unusual issue. When I refresh the home page, the CSS styles persist without any problem. However, if I navigate to a different page like " ...
I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...