Adjusting the header and unordered list on resize

I need help with my portfolio website. I can't seem to figure out how to make my header and navigation menu stack on top of each other when the page is small, and then go back to their normal layout when the page is larger.

Below is the HTML code I'm using.

<body class="container" id="boostrap-overrides">

<a id="name" href="#">Jasmine Parson</a>
 <ul id="list" class="nav justify-content-end">
  <li class="nav-item">
   <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
   <a  id="mid" class="nav-link" href="#">Work</a>
  </li>
  <li class="nav-item">
   <a class="nav-link" href="#">Contact</a>
 </li>
</ul>

Here is the relevant CSS code.

#boostrap-overrides ul {
 flex-wrap: nowrap;

}

.center {
 text-align: center;
}

ul {
 float:right;   
 display: inline;
 line-height: 15px;
 margin: 0 auto;
}

Also, here is the jQuery code I'm using.

   $(window).resize(function(){
 if($(window).width() <= 700){
   $("#list").removeClass("justisfy-content-end");
   $("#list").addClass("justisfy-content-center");
 } 
});

Answer №1

give this a try>>>

    <a id="name" href="#">Jasmine Parson</a>
     <ul id="list" class="nav justify-content-end">
      <li class="nav-item">
       <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
       <a  id="mid" class="nav-link" href="#">Work</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="#">Contact</a>
     </li>
    </ul>

//CSS
    #boostrap-overrides ul {
     flex-wrap: nowrap;

    }

    .center {
     text-align: center;
    }
    .justify-content-end li{
    float:left;
    }
    ul {
     float:right;   
     display: inline;
     line-height: 15px;
     margin: 0 auto;
    }

//JS
     if($(window).width() <= 700){
       $("#list").removeClass("justisfy-content-end");
       $("#list").addClass("justisfy-content-center");
     } 
    });

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

Tips for Maintaining Hidden Side Navigation Bar on Postback in C# Web Forms Application

I built a C# web application using webforms, complete with a side navigation bar that is displayed by default. However, when the user clicks on a toggle button, it gets hidden and will be shown again upon another click. Here is the JavaScript code in my s ...

Guide to using AJAX for the GraphHopper Matrix API

I am struggling to send this JSON with the required information because I keep encountering an error during the request. message: "Unsupported content type application/x-www-form-urlencoded; charset=UTF-8" status: "finished" I'm not sure what I&apos ...

Malfunctioning JavaScript timepiece

I am currently experimenting with using Raphael to create a unique clock feature on my website. My goal is to animate the seconds hand to mimic the movement of a traditional clock. Below is the code snippet I have implemented: window.onload = function( ...

Adjust the baseline of text in <li> elements by shifting it 2 pixels upwards

My webpage menu is set up with inline "li" elements within a "ul". Each "li" has a colored border and contains an "a" tag. I'm looking to change the text color inside the "a" tag and move it 2px up when hovering over it without affecting the li border ...

Generate unique identifiers in HTML

Below is my HTML and JavaScript code: <!DOCTYPE html> <html> <head> <style> .custom-div { border: 1px solid green; padding: 10px; margin: 20px; } </style> <script> ...

Dim the entire website

I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended. There seems t ...

My initial junior UI/UX assignment: Can you confirm whether this form modal dialog is pixel-perfect, and offer any suggestions for improvements

Currently diving into my first project as a Junior UX/UI Designer. Coming from a background in software engineering, I decided to challenge myself by focusing on design. I'm seeking feedback on the pixel perfection of this modal window, which my seni ...

Navigating a sortable list using jQuery

I have integrated the "sortable" script from on my web application to create a sortable list of items. While the sorting functionality works perfectly, I now need to update my server with the new order whenever changes are made. To capture the sorting ev ...

Issue with Selenium: Unable to select the WebElement

I am a beginner with selenium and I have encountered a problem while trying to click on a specific element using the following locators. Unfortunately, none of them seem to work as expected and my scripts just skip over that particular line without any err ...

Display a JSON encoded array using Jquery

Within an ajax call, I have a single json encoded array set: $var = json_encode($_SESSION['pictures']); The json encoded array is stored in a variable called "array" When I try to display the contents of "array" using alert, I get this respons ...

Paused session in web development

Currently, I am in the process of building a website using HTML and CSS and have encountered an issue. Within my CSS file, I have defined an ID called "full" which sets a wooden background after the sidebar and is intended to span across the entire page. A ...

Limiting character count in jQuery using JSON

I am trying to manipulate the output of a snippet of code in my jQuery: <li> Speed MPH: ' + val.speed_mph + '</li>\ that is being pulled from a JSON endpoint and currently displays as: Speed MPH: 7.671862999999999 Is there a ...

Using [(ngModel)] in Angular does not capture changes made to input values by JavaScript

I have developed a custom input called formControl, which requires me to fetch and set its value using [(ngModel)]: import { Component, Injector, OnInit, forwardRef } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCE ...

Easily generate a hierarchical layout in HTML with this straightforward method

I'm currently working on implementing a hierarchical tree structure for a website. I need to organize a user's projects, tasks, and sub-tasks in a visually appealing manner using HTML elements. Any suggestions or creative ideas are welcome! ...

Customizing the size of dateBox icons in JQuery Mobile

Is there a way to increase the button size within the input box of a dateBox? Currently, it appears small and difficult to click accurately. Additionally, it would be beneficial if clicking anywhere in the input field could open the calendar, instead of ju ...

Ensure that the function .each() waits for the element to be converted to a DataURL

Utilizing html2canvas for the conversion of HTML elements into canvas images, I iterate through the HTML using .each to pass elements to html2canvas. Once an element is converted into a DataURL, it is added to an array called content. $('.itinerary- ...

The MVC structure does not properly fetch the desired value from the Ajax request for the HTML page

Here is the script for the Dashboard module: $(function() { var o; $.get('dashboard/xhrgetInsert',function(o) { for(var i = 0;i <= o.length; i++) { $("#appendHere").append("<div>"+o[i] ...

Conditional rendering is effective for displaying a form item based on certain conditions, but it may not be as effective for

I want a textarea element to appear or disappear based on the selected state of the radio buttons before it. If "no" is chosen, the textarea will be hidden, and if "yes" is chosen, the textarea will become visible. <fieldset class="input-group form-che ...

Has the jQuery plugin object misplaced a variable?

I am in the process of developing a basic plugin using jQuery. My current approach involves creating private functions and storing variables within the jQuery object itself. (function($) { var somePrivateFn = function() { alert(this.x); } ...

What are the steps to assign a variable by selecting a link from a list that is automatically generated?

After generating a list from a query, everything is working smoothly. Now, I want to use jQuery to trigger an event that will set a PHP variable for me. The scenario is simple - I have a table with 'column 1' and 'column 2'. Each link ...