Update the Navbar links to smoothly slide along the navigation bar as the width decreases, instead of awkwardly

Question

Update the Navbar links to smoothly slide along the navigation bar as the width decreases, instead of awkwardly

When in full screen, the Navbar links are displayed horizontally.

https://i.stack.imgur.com/0mOLp.png

However, when the width changes, they appear like this

https://i.stack.imgur.com/2ylgZ.png

Is there a way to ensure they shift to the left while maintaining their horizontal layout?

HTML

<nav>
<h1 id=>Nav</h1> <div id="NHide">   
<ul>
    <li><a class="NavL" href="#slide1" title="Sample Text">Slide 1</a></li>
    <li><a class="NavL" href="#slide2" title="Sample Text">Slide 2</a></li>
    <li><a class="NavL" href="#slide1" title="Sample Text">Slide 3</a></li>
    <li><a class="NavL" href="#slide1" title="Sample Text">Slide 4</a></li>
</ul>
</nav>

CSS

#NHide{
position:absolute;
left:77%;
top:0%;    
}   

nav {
position: fixed;
z-index:1;    
font-size: 24px;
width: 100%;
line-height: 48px;
height: 48px;
background: #000;
text-align: left;
font-family: 'PT Sans', sans-serif;
color: #fff;
} 

ul { 
list-style-type: none;
margin: 0;
padding: 0;
float:left;
}

li {
display:inline-block;
}

.NavL {
display: block;
width: 100px;
}

jquery html css

Answer 1

Answer №1

To customize this CSS, you need to make some adjustments:

#NHide{
  float:right;
}

Alternatively, you can use the following code (although the previous option is recommended):

#NHide{
  position:absolute;
  right: 0;
  top:0;
}

The reason for this change is that maintaining a fixed 77% position from the left may cause wrapping issues, especially if your navigation bar is too wide to fit on one line.

If these solutions do not resolve the issue, consider providing a working example on a platform like http://jsfiddle.net.

Answer 2

To customize this CSS, you need to make some adjustments:

#NHide{
  float:right;
}

Alternatively, you can use the following code (although the previous option is recommended):

#NHide{
  position:absolute;
  right: 0;
  top:0;
}

The reason for this change is that maintaining a fixed 77% position from the left may cause wrapping issues, especially if your navigation bar is too wide to fit on one line.

If these solutions do not resolve the issue, consider providing a working example on a platform like http://jsfiddle.net.

Answer 3

Answer №2

If you're looking to align your links to the right side of the navigation bar, simply adjust the CSS properties by setting right: 0 and removing the left: 77%

Check out this fiddle for reference

#NHide{
    position: absolute;
    right: 0;
    top: 0%;    
}

Answer 4

If you're looking to align your links to the right side of the navigation bar, simply adjust the CSS properties by setting right: 0 and removing the left: 77%

Check out this fiddle for reference

#NHide{
    position: absolute;
    right: 0;
    top: 0%;    
}

Answer 5

Answer №3

Implement this code snippet into your CSS

#NHide
{
position:absolute;
right:0px;
top:0%;    
}   
h1#headnav
{
position:absolute;
left:0px;
top:-28px;
}

Include the following line in your HTML code

<h1 id="headnav">Nav</h1>

Answer 6

Implement this code snippet into your CSS

#NHide
{
position:absolute;
right:0px;
top:0%;    
}   
h1#headnav
{
position:absolute;
left:0px;
top:-28px;
}

Include the following line in your HTML code

<h1 id="headnav">Nav</h1>

Update the Navbar links to smoothly slide along the navigation bar as the width decreases, instead of awkwardly

Answer №1

Answer №2

Answer №3

Similar questions

Update options in HTML form dropdowns dynamically based on selections from other dropdowns using Node.js

The media does not need to be applied to the ".nav__btn" class

In Firefox, the focus outline is not shown on a div that has a mask-image CSS rule applied to

Blog Format Featuring Side-by-Side Columns

The section cannot be shown in a flex layout within a grid container

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

Creating a dynamic form in Angular based on user input

Setting header details for optimal data transfer

Ensures that two divs have the same dimensions

Text randomly appears on the html page

JQuery - ToggleMenu - 3 different menus nested under 3 separate div containers

Incorporate JSON data into a subsequent AJAX call when coding in JavaScript

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Only initiate the loading of the iframe within the div upon clicking a specific element

I am looking to navigate between tabs on a multi-part form in order to submit all the form data

Guide on integrating a jQuery confirmation popup in CodeIgniter

Obtain a set of items from a JSON result and transfer them to the database

Jquery experiencing compatibility issues with Internet Explorer

Submitting a form into a database with the help of AJAX within a looping structure

The Ajax POST functionality appears to be malfunctioning, whereas the PHP equivalent is operating without any