Troubles with the placement of the navbar icon in responsive design

After following a tutorial on responsive navigation bars (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp), I successfully implemented the navbar on my website. However, I encountered an issue with the icon placement when clicked. Here is how it looks initially:

https://i.sstatic.net/X9rr6.png

But when the icon is clicked, it moves to the top right corner as shown here:

https://i.sstatic.net/2F71r.png

I have tried adjusting various CSS settings but haven't been able to fix this unexpected behavior. Below is the HTML code snippet for reference:

  #nav-div {
  font-family: 'Manaspace Regular';
  ...
...

The JavaScript responsible for handling the dropdown functionality is located at the end of the code snippet. Any assistance in resolving this issue would be greatly appreciated as it is the final step needed to complete my website setup!

htmlcss

Answer №1

My approach was simple: I rearranged the navbar elements to position the icon as the second element and used CSS to display it when the screen reaches a certain width.

<a href="{% url 'home' %}" id="home-link">Home</a>
 <a href="javascript:void(0);" class="icon" id="responsive-icon" onclick="dropDownMenu()">&#9776;</a>
 <a href="{% url 'play' %}" class="menu_list" id="play-link">Play</a>
 <a href="{% url 'scores' %}" class="menu_list" id="score-link">Scores</a>
 <a href="{% url 'source' %}" class="menu_list" id="source-link">Source</a>

I removed this code snippet:

.topnav.responsive a.icon {
   position: absolute;
   right: 0;
   top: 0;}

Despite following a tutorial, I'm still unsure why it didn't work as expected.

Answer №2

It seems that the dropDownMenu() function is responsible for changing the positioning value.

As per the tutorial, this function adds a class to the icon-div. Make sure to compare the position value in the added class with the original one.

Additional information:

"Position absolute removes the element from the normal document flow. This means it no longer occupies space like static and relative positions. When an element is positioned absolutely, it is placed relative to its closest parent with a position of relative."

.topnav.responsive a.icon {
  position: absolute;
  right: 0;
  top: 0;
}

Setting right: 0; and top: 0; moves your icon to the top-right corner. However, with position: absolute, it exits the parent's flow and behaves like an element of the body. Consider removing these values or calculate the necessary space accordingly (e.g., top: (height of the element on top)).

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

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

I'm encountering an issue while attempting to customize the text color inside an ion select element based on the option selected. Unfortunately, when I make changes to the shadow part in one component, it affects other components as well. I want to ap ...

cssreactjsionic-frameworkshadow-dom

Blazor Shared CSS File

Currently, I have successfully implemented 2 pages in my Blazor app: Login.razor located in the Auth folder AddPerson.razor situated in the Profile directory At this point, I have managed to integrate a CSS file specifically for the AddPerson.razor page ...

c#cssblazor

Passing string values to an onClick event listener in Javascript is similar to how it is done in an onclick event listener in HTML

render() { return ( <div> <div onClick={() => "FSR.launchFeedback('ax9sgJjdSncZWoES6pew6wMIyCgSXpC')" } /> </div> ); } This piece of code initially appear ...

javascripthtmlreactjs

What is the best way to transfer an argument from a parsed JSON value to an onclick function?

In our dataset, we have a specific table that contains valuable information. My main objective is to transfer an argument extracted from parsed JSON data to a separate JavaScript function known as newStory(value['stories']) using the onclick meth ...

javascriptjqueryhtml

How come there is such a large space for clicking between my logo and the navigation bar, and what can be done to eliminate it?

* { box-sizing: border-box; padding: 0; margin: 0; } ul { list-style-type: none; } .nav-links, .logo { text-decoration: none; color: #000; } .logo { max-width: 80%; width: 20%; height: 20%; } .navbar img { width: 10%; height: auto; di ...

htmlcssimageweb

Verify whether the chosen options from a dropdown list coincide with a predetermined value

I am working with a form that generates dropdown lists dynamically. <c:forEach var="companyList" items="${company.detailList}" varStatus="status"> <tr> <td>c:out value="${companyList.employeeName}" /></td> <td> <select ...

javascriptjqueryhtmltwitter-bootstrap

unable to modify background color when mouse hovers in CSS

Recently, I implemented this code to style the navigation bar on my website. However, I encountered an issue where the color does not change when hovering over the links. .nav { list-style-type:none; margin:0; padding:0; overflow:hidden; } ...

htmlcss

Is there a way to modify this JavaScript code so that it can function with a

I have developed a unique audio player that plays random sections of different songs. Currently, it is hardcoded for one song with three intros, a midsection, and three outros. I am looking to create a system where a list of songs can be randomly chosen fr ...

javascripthtmlhtml5-audio

Can a custom structural directive be utilized under certain circumstances within Angular?

Presently, I am working with a unique custom structural directive that looks like this: <div *someDirective>. This specific directive displays a div only when certain conditions are met. However, I am faced with the challenge of implementing condit ...

htmlangulartypescriptangular-structural-directive

Bootstrap4: What could be causing the adjacent row cell to remain left-justified instead of being centered as intended with mx-auto?

I've been working on creating a responsive header using Bootstrap4. The main goal is to have the logo displayed as left-justified text and the menu items as right-justified when the viewport is large, then transition to both being centered in a "small ...

htmlcssbootstrap-4flexbox

Animate the entrance of mobile content as it slides into view while scrolling

I am currently working on a WordPress theme and facing an issue: When I click the hamburger menu without scrolling down the page, the mobile menu slides in smoothly. However, if I scroll down the page, the mobile menu fails to slide into view (I have to s ...

css

Prevent line breaks caused by the span tag in Bootstrap 5

I have been attempting to use white-space:nowrap; to prevent the span tag in this text from causing a line break, but so far I have not been successful. The class styles used here are all standard Bootstrap 5 CSS class styles. On wider screens, the time i ...

cssbootstrap-5

CSS :contains selector after adding a script through Ajax append operation

Is there a way to change the text color in $('td:contains("text")').css('color','red') after an Ajax load script? Here is the main code snippet <div id="datatable"></div> <script src="https://code.jquery.com/j ...

javascriptjquerycss

Fetch data in JSON format from a specified URL

I have been attempting to fetch a JSON from a specific URL. Here is my current code snippet: <script> var co2; $(document).ready(function(){ alert("0"); $.getJSON(url,function(result){ var jsonObject = result; alert(result); ...

javascripthtmljson

Personalized parallax design

I am in the process of developing my own custom parallax plugin to allow me to control the direction in which items transition off the screen. However, I am currently facing a challenge in ensuring that regardless of how a user scrolls or the size of the w ...

javascriptjqueryhtmljquery-effectsparallax

Activate divs with Bootstrap5 modal toggle functionality

What adjustments must be made to the Bootstrap 5 example below in order to achieve the following two objectives: The "afterAcceptingTerms" division should remain hidden until the user clicks on the Accept Terms modal button, ensuring that only the "before ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Uploaded images from mobile devices appear to be rotated when viewed on desktop browsers like Chrome and Firefox

I'm facing a strange issue where an image uploaded from a mobile device to my website appears rotated on Chrome and Firefox when viewed on a desktop. However, it displays correctly on mobile browsers like Chrome Mobile and Safari Mobile. It seems tha ...

javascripthtmlcssreactjs

Is there a way to show the input value in a different form while still retaining the original value?

When receiving a pagination number from user input, I store it in a variable like so: $html .= "<input type='submit' name='next' value='$next_page_number' />"; Now, I'm looking to replace the displayed text for th ...

phphtmlcss

What are the steps to modify data within the root component?

I am currently working on a Vue project with vue-cli and routes. In my App.vue file, the template structure is as follows: <template> <div id="app"> {{Main}} <router-view></router-view> </div> </template&g ...

javascripthtmlvuejs2vue.js

Creating a dynamic table with columns of fixed width in Angular on the fly

I am struggling to create a data table with fixed column widths (20% each). I have incorporated div elements in my table structure to enable dynamic row creation using Angular, but this has caused some design issues. My goal is for all rows to occupy 100% ...

cssangularhtml-table