The navigation bar created with HTML, CSS, and JS is not displaying the menu as expected and is also experiencing issues with changing the order of links

I'm currently in the process of revamping my portfolio site, opting to use Bootstrap for the layout due to its efficiency. While attempting to implement a drop-down navbar using Bootstrap, I encountered difficulties as the menu failed to appear. Thus, I reverted to utilizing HTML, CSS, and JS for the navigation menu based on a tutorial from W3C Schools, with some adjustments made to suit my needs.

Furthermore, I encountered challenges in rearranging the order of the menu items as I desired (e.g., Home | Projects | About Me | Contact). Below is a snippet of my code:

    <!DOCTYPE html>
    (code continues...)

If anyone could provide insights on where I may have gone wrong or if it would be advisable to start afresh with a Nav element and incorporate CSS and JS to ensure responsiveness, your input would be greatly valued. Thank you for your assistance.

javascripthtmlcssbootstrap-4responsive-navigation

Answer №1

After noticing that your About and Contact divs were mistakenly placed inside your Projects dropdown, I rearranged them to appear after:

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
body {
  margin: 0;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: pink;
  color: white;
}

.topnav .icon {
  display: none;
}

// CSS code continues...


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <!-- HTML head continues... -->
</head>

<body>

  // HTML body content continues...

</body>

</html>

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

Data Filling and Consolidating in MongoDB

Recently, I inquired about a similar issue here: Mongoose/Mongodb Aggregate - group and average multiple fields I am attempting to utilize Model.aggregate() to determine the average rating of all posts based on date and then further categorized by specifi ...

javascriptmongodbmongooseaggregatepopulate

.NET Core global layout using Bootstrap Datepicker

(Currently coding in .NET Core 3.1). I've integrated a bootstrap Datepicker into my _layout. <form class="form-inline ml-3"> <div class="input-group mb-3"> <div class="input-group date" id="datepicker"> ...

.netasp.net-coremodel-view-controllerbootstrap-4

I am noticing multiple quantities of the same item being added to my shopping

Recently, I encountered a problem with my online shop that seems to be related to the Javascript. The issue arises when I add an item to my shopping cart from this particular page: . Initially, when I click 'Add to Cart,' the item is correctly ad ...

javascripthtmlcss

Adding wrapAll in jQuery or PHP after tags with identical IDs can be achieved by selecting all the target elements

web development <?php foreach ($forlop as $value) : ?> <?php $stringTitle = substr($value->getTitle(), 0, 1); ?> <?php if(is_numeric($stringTitle)){ echo "<h3 id ...

javascriptphpjquery

How can one properly iterate through an HTML Collection in JavaScript?

I need help with creating a slider using JavaScript. The code I have written below calculates the widths of the slides, but it's throwing an error in the console. Can someone advise on how to properly loop through and assign width to these elements? ...

javascriptloops

Sending Unique Identifier to AJAX Script

As I delve into my inaugural AJAX script, coupled with PHP pages, the intricacies of AJAX are slowly revealing themselves to me. Being relatively new to Javascript, I have managed to successfully implement the script. The task at hand involves enhancing a ...

phpjavascriptajax

Is the Order of a JSON Array Dependable?

When working with JSON, it's clear that relying on the ordering of key-value pairs may not be reliable. For instance, a JSON parser could interpret { "someKey" : "someValue", "anotherKey" : "anotherValue", "evenAnotherKey" : "evenAnotherV ...

javascriptjson

Automatically populate a jQuery dropdown box with MySQL data

I have a scenario where I need to create 2 dropdown boxes. The first dropdown box will display all the tables from a database, and when a table is selected, the second dropdown box should be populated with fields from that specific table. Dropdown Box 1: ...

jqueryhtmldrop-down-menu

Collaborating with SockJS connectivity

Currently, my Node.js backend is interacting with desktop clients using websockets. The communication from the server side is initiated from a web front-end and everything is functioning properly because I am storing the SockJS Connection instances in an ...

javascriptnode.jswebsocketsockjs

Having trouble getting buttons to wrap onto a new line instead of spilling over the container

Struggling with getting a JSFiddle to work properly with React and other dependencies, I've decided to share the Github repo link to demonstrate the issue: https://github.com/ishraqiyun77/button-issues/ The main problem arises when a group of button ...

cssreactjstwitter-bootstrapbuttonbootstrap-4

How to Handle Non-Conventional JSON Parsing in AngularJS

When retrieving a JSON response from a Restful service, the format may not always be accepted by Angular. For example: { "comments":{ "columns":[ "clientId", "treatmentDate", "comments", "photo", "pra ...

javascriptangularjsjson

Is the Material-UI 1.3 font size failing to adapt to varying screen widths?

Looking to create an app with responsive font sizes using material-ui (v1.3)? Also, want the font size to shrink when the screen size is smaller and adjust automatically. However, the current code doesn't update the font size dynamically as the screen ...

htmlcssreactjsmaterial-ui

What could be causing this jQuery selector to not select any elements?

Here's a simple question with some code that needs troubleshooting: $insides = $('<thead><tr><th><!--Blank space --></th></tr></thead><tbody><tr class="green-row"><td>Opportunities to D ...

javascriptjqueryhtmldom

A guide on setting up an Alert notification following a Server Error Response using Dropzone.js

I am trying to create a functionality in dropzone.js that triggers a javascript alert when the server returns an error in json format. Below is the function/method I have implemented for file upload, which seems to be working correctly: public functi ...

javascriptphpjsondropzone.js

Obtain the URL linked to the button that was just clicked

As a newcomer to jQuery, I have a question: For instance, on a webpage with a voting feature, when a button is clicked, a counter is increased by +1. Now, how can the URL of this button be displayed on a website? This way, if the URL is shared with others ...

phpjavascriptjquerymysqlajax

Having trouble getting the `nth-of-type` and `nth-child` selectors in CSS to function

I am attempting to apply a green color for the first nth child flag element <div id="axis"> <div class="super"></div> <div class="flag">flag 1</div><!-- I want this text to be green--> <div class="supe ...

htmlcsscss-selectors

@mui/x-date-pickers styling for the DatePicker component

Despite numerous attempts, I have been unsuccessful in styling the @mui/x-date-pickers <DatePicker/> component. I've experimented with various methods such as sx={{}}, style={{}}, makeStyles(), .css with the !important rule, renderInput={(param ...

javascriptreactjsmaterial-ui

The Next.js page suddenly disappears after a moment

Out of the blue, my next.js page suddenly went blank for no apparent reason. I didn't make any changes, it just happened. I attempted to restart my dev server and even deleted the '.next' folder, but nothing seemed to fix the issue. Despite ...

javascriptreactjsnext.js14

Exploring the wonders of Jasmine coding with jQuery

I am relatively new to conducting Jasmine tests. I have a basic understanding of how to install it and use simple commands like toEqual, toBe, etc. However, I am unsure of how to write test code for this particular jQuery function using Jasmine. if ($(&ap ...

javascriptjasmine

Create shortened class names

Is there a way to abbreviate class names in HTML and CSS files? For example, I currently have the class name: .profile-author-name-upper And I would like to change it to something shorter like: .p-a-n-u or .panu Any suggestions on how to achieve thi ...

htmlcssgruntjscss-selectors