Aligning the navigation bar with 'float: left;' and 'float: right;' properties

I'm struggling with aligning the navigation buttons on my nav bar to the left and the signup/login links to the right. I attempted to create separate navbars for each, but it's causing issues in my code.

I tried using ':last-child' but didn't have any success...

.nav-wrapper ul {
  float: left;
  padding-left: 50px;
}

.nav-wrapper ul li {
  display: inline-block;
}

.nav-wrapper ul li:not(:first-child) {
  margin-left: 36px;
}

.nav-wrapper ul li:last-child {
  margin-right: 18px;
  float: right;
}

.nav-wrapper ul li a {
  display: inline-block;
  outline: none;
  color: #333333;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1.24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: normal;
}
<nav class="nav-bar">
  <input type="checkbox" id="nav" class="hidden">
  <label for="nav" class="nav-btn">
        <i></i>
        <i></i>
        <i></i>
                    </label>
  <div class="logo">
    <a href="#" class="name">"logo"</a>
  </div>
  <div class="nav-wrapper">
    <ul class="list">
      <li><a href="index.php">Home</a></li>
      <li><a href="collections.php">Collections</a></li>
      <li><a href="contact.php">Contact</a></li>
      <li><a href="login.php">Log In</a></li>
      <li><a href="signup.php">Sign Up</a></li>
    </ul>
  </div>
</nav>

htmlcss

Answer №1

To align the last child element of your ul to the right using flexbox, you can simply apply the margin-left: auto property to it. This eliminates the need for floats in this scenario:

.nav-wrapper ul {
  display: flex;
  padding-left: 50px;
  list-style: none;
}

.nav-wrapper ul li:not(:first-child) {
  margin-left: 36px;
}

.nav-wrapper ul li:last-child {
  margin-right: 18px;
  margin-left: auto;
}

.nav-wrapper ul li a {
  display: inline-block;
  outline: none;
  color: #333333;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1.24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: normal;
}
<nav class="nav-bar">
  <input type="checkbox" id="nav" class="hidden">
  <label for="nav" class="nav-btn">
        <i></i>
        <i></i>
        <i></i>
                    </label>
  <div class="logo">
    <a href="#" class="name">"logo"</a>
  </div>
  <div class="nav-wrapper">
    <ul class="list">
      <li><a href="index.php">Home</a></li>
      <li><a href="collections.php">Collections</a></li>
      <li><a href="contact.php">Contact</a></li>
      <li><a href="login.php">Log In</a></li>
      <li><a href="signup.php">Sign Up</a></li>'
    </ul>
  </div>
</nav>

Answer №2

In my humble opinion, a header element (the topbar) can be structured with two nav elements inside, each with their own alignment.

<header class="topbar">
  <div class="logo">
    <a href="#" class="mylogo">My logo</a>
  </div>
  <nav class="navigation">
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="collections.php">Collections</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
  </nav>
  <nav class="user">
    <ul>
      <li><a href="login.php">Log In</a></li>
      <li><a href="signup.php">Sign Up</a></li>
    </ul>
  </nav>
</header>

Furthermore,

header.topbar {
  position: relative;
  display: block;
  float: left;
  width: 100%;
}
.logo {
  position: relative;
  display: block;
  float: left;
}
nav.navigation {
  position: relative;
  display: block;
  float: left;
}
nav.user {
  position: relative;
  display: block;
  float: right;
}
nav ul {
  position: relative;
  display: block;
  float: left;
  list-style: none;
}
nav ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0px 12px;
}

Answer №3

If you want your code to function properly, consider eliminating the float: left; property from the .nav-wrapper ul selector.

A more intuitive approach, in my view, would be to utilize CSS grid and segment your ul into two distinct sections (the main ul for the left side and the secondary ul for the right side):

.nav-wrapper {
  display: grid;
  grid-template-columns: 1fr max-content;
}

.nav-wrapper ul.list {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.nav-wrapper ul li:not(:first-child) {
  margin-left: 36px;
}

.nav-wrapper ul li a {
  display: inline-block;
  outline: none;
  color: #333333;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1.24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: normal;
}
<div class="nav-wrapper">
    <ul class="list list-main">
        <li><a href="index.php">Home</a></li>
        <li><a href="collections.php">Collections</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
    <ul class="list list-secondary">
        <li><a href="login.php">Log In</a></li>
        <li><a href="signup.php">Sign Up</a></li>
    </ul>
</div>

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

Is it possible to eliminate the css class prefix when using Modular css in React?

When working with React & NextJS, I have observed that my modular SCSS files are automatically prefixing my classnames with the name of the file. Is there a way to turn off this feature as it is making the DOM structure difficult to interpret? For instanc ...

javascriptcssreactjsnext.jssass

using `clear: both` does not stop text from wrapping

Currently, I am facing an issue with positioning 3 divs in my layout. Two of the divs are floating to the left and right respectively, while the third one should be placed under the two others. I tried using clear: both but it doesn't seem to work as ...

htmlcsscss-float

Two adjacent iframes, where the first one serves as a sidebar containing hyperlinks that, when clicked, will display the corresponding content within the second

Closed. This question is opinion-based. It is not currently accepting answers. Lo ...

javascripthtmliframe

Cover the entire page with a solid background color

Is there a way to extend the green color from top to bottom on the page? Also, how can I move the CRUD section to the left? https://i.sstatic.net/pXxhl.png I'm having trouble filling the entire page with the content. Below is my code written in Vue ...

cssvue.jsbootstrap-vue

Personalize the color scheme for your timeline paper

I am interested in customizing this specific example of a personalized timeline: import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Timeline from '@material-ui/lab/Timeline'; import Timeli ...

javascriptcssreactjsmaterial-ui

"Create dynamic web pages with multilingual support using HTML, JQuery, and nested

For my multilingual website, I wrote this simple JQuery code: (function() { var language, translate; translate = function(jsdata) { $('[tkey]').each(function(index) { var strTr; strTr = jsdata[$(this).attr('tkey')] ...

jqueryhtmljsonmultilingual

Learn how to trigger various servlets by clicking different buttons within an HTML form

I have an HTML form and I need to call two different servlets when two different buttons are clicked. How can I change the form action at runtime? <form> <input type="submit" value="Question Paper" style="height:25px; width:120px; background-colo ...

javascripthtmlservlets

Is it necessary for CSS Media query to load all the referenced CSS files?

When utilizing a CSS Media Query to assign two different stylesheets, such as desktop.css and mobile.css based on the max-width, how does this process function? Is it necessary for both stylesheets to be loaded by the browser every time, and then the appr ...

htmlcssmobile-safarimedia-queries

Speeding up your responsive design with a single CSS file or multiple files is a crucial

There are numerous discussions on whether it's better to have many CSS files or just one, with the consensus being that using a single file reduces the number of HTTP requests. However, my question is a bit different. Personally, I tend to use two CS ...

htmlcssresponsive-design

Update the display of the mouse pointer

I use CSS to set a custom cursor image: #scroll_up{ display: block; position: absolute; width: 960px; height: 300px; cursor: url(../imgs/cursor_up.png), auto; } The above style is assigned to a div element so that the cursor appea ...

cssattributescursor

Positioning Backgrounds with Padding in DIV Elements

I am trying to figure out how to add a check mark next to text in a button with specific styling. I have managed to get the check mark aligned properly using Background:left center, but I also want to add padding and adjust spacing. Is there a way to achie ...

javascripthtmlcssbackgroundjsfiddle

Utilizing URL parameters in PHP: A beginner's guide

Recently, I've been working on a report error form containing 4 essential fields: Job ID $jobid Part ID part_id Machine Note Users access the form by clicking on a table corresponding to their tasks and are directed to a new page with a URL contain ...

phphtml

Retrieve the input react component's name

I am new to working with React and I am trying to figure out how to retrieve the name of an input so that I can pass it as a parameter in a method. <div > <FormGroup style={{ width: "400px" }}> ...

htmlreactjs

Having trouble getting your jQuery image slideshow to function properly?

I am currently working on creating an image slider that fetches images from placekitten. My goal is to make it versatile enough to accommodate different image sizes. The slider should display a small description of the image at the bottom, the name of the ...

javascriptjqueryhtmlcssimage

What is the difference between a CSS background image and a default background?

I am faced with a challenge concerning a div element that has both a background color and an image with a transparent background. My objective is to have the default background color of the div be white, while having a different color as the background fo ...

backgroundbackground-imagecss

Modifying the cursor presentation in the Atom editor

Hey there, I'm curious if there is a method to customize the caret style in Atom similar to how it's done in Sublime Text 3. In Sublime Text 3, you can change the caret style using this JSON setting: "caret_style": "phase" Is there a comparable ...

cssjsonatom-editor

How can I include inline CSS directly within a string instead of using an object?

Is there a way to write inline CSS in a string format instead of an object format? I attempted the following, but it did not work as expected: <div style={"color:red;font-weight:bold"}> Hello there </div> What is my reason for want ...

javascriptcssnext.jssassnext.js13

Guide to sequentially playing multiple video objects with buffering

As I work on developing a reference player application that utilizes node.js, javascript, and HTML5, I have encountered an issue. Currently, my player successfully loads a single video and generates diagnostic data from it. However, I am striving to enhanc ...

javascriptnode.jshtmlvideo

Height of dropdown items in the horizontal navbar

I am working on a navbar that includes a dropdown menu. Currently, the dropdown items are being displayed horizontally in full width with a larger height. However, I would like them to be displayed vertically in full width and with a smaller, normal height ...

csstwitter-bootstrap-3

Is there a way for my element to fill the entire screen and prevent any scrolling from occurring?

I am looking to ensure that my children's div occupies the remaining space on the screen and prevent scrolling. Since I am utilizing PanZoom, I need the children's div to always fill 100% of the screen. <div class="parent"> &l ...

javascripthtmlcssvue.js