Tips for Splitting Navigation Bar in HTML and CSS

I am facing an issue with my webpage's navigation bar, as I am unable to divide it into two parts - with some text on the left side and some on the right side. I attempted to use code from a specific reference: http://www.w3schools.com/css/css_navbar.asp

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a href="#about">About</a></li>
    <li><a href="#login">Login</a></li>
  </ul>
</ul>

However, this approach does not seem to be effective. When I insert the code within 

<ul style="float:right;list-style-type:none;">

nothing changes.

Is there a more efficient way to achieve this?

Below is the code for my list:

           <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">





      <li>
            <a href="#contact" >Contact</a>
        </li>
        <li>
            <a href="#services" >Join Us</a>
        </li>
        <li>
            <a href="#about"  >About</a>
        </li>
        <li>
            <a href="#top" >Home</a>
        </li>


</section>
javascriptjqueryhtmlcss

Answer №1

Check out your case on this working link.

Your first step should be fixing the markup and then adjusting the CSS accordingly:

Here is the corrected form:

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <ul>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#services">Join Us</a></li>
      <ul style="float:right;list-style-type:none;">
        <li><a href="#about">About</a></li>
        <li><a href="#top">Home</a></li>
      </ul>
    </ul>
    <div>
  </div>
</nav>

CSS: 

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

Answer №2

Check out this CSS styling:

ul li
{
  float:left;
  padding:5px;
}
ul li a
{
  padding:5px 10px;
    color:#666666;
    text-decoration:none;
    font-size:18px;
  background:#FFFFFF;
}
ul li a:hover
{
   background:black;
   color:white;
}

See demo here!

Alternatively, try this style:

.container
{
  background:gray;
  width:200px;
}
.container li
{
  padding:5px 10px;
    color:#666666;
   background:green;
  width:100%;


    font-size:18px;
  list-style-type:none;
}
.container li a
{
  text-decoration:none;


}
.container li a:hover
{
   background:red;
  width:100%;
  display:block;
  padding:5px;
}

See the demo in action!

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

Selecting a single checkbox automatically selects all other checkboxes

Is there a way to automatically check all other checkboxes if one checkbox is checked? Here's the code snippet I have: <tr> <td class="small"><asp:CheckBox ID="chkReportModuleName" runat="server" name="report"></asp:CheckBox& ...

javascriptjqueryasp.net

Create an interactive visualization using d3.js

Currently, I am on the hunt for a technology that can help me render a tree structure based on Json data. After researching options like graphViz and d3, it seems like d3 is more optimized for modern browsers. With the extracted Json data, my goal is to c ...

javascriptphpjsond3.jsgraphviz

Encountering the error "object object" while attempting to pass parameters to my servlet through AJAX

Experiencing an issue where my ajax call is ending up in the error function. I have noticed that my success function is empty, but I was expecting to receive messages from my servlet whether the data provided is correct or incorrect. The popup dialog displ ...

javascriptjqueryajaxjsonservlets

Issue encountered while attempting to run Next.js application. Halts abruptly shortly after initialization

After installing the Next.js app, I encountered an issue where the app would not start and would stop immediately. My terminal displayed the following: PS D:\Nextjs\MyApp> npm run dev > dev > next dev ready - started server on 0.0.0.0: ...

javascriptnode.jsnext.jsserver-error

Trouble Scrolling Webpage Vertically on Screens Exceeding 768px Width

I've been searching high and low for an answer that seems to be right in front of me, but I just can't see it. The issue is quite simple: the page refuses to scroll vertically on screens wider than 768px: Whenever the screen size exceeds 768px, ...

cssscroll

Is it possible to target elements within a UMAP iframe using CSS?

I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...

javascriptcssgoogle-mapsiframeselector

What is the best method to modify the hover text color in a Bootstrap navbar?

Whenever the cursor hovers over the letters, I attempted to modify their color, but unfortunately, it didn't work as expected. nav a { text-decoration: none; } .logo { height: 3rem; } .navbar-nav .nav-item .nav-link.custom:hover { color: ...

csstwitter-bootstrapbootstrap-5

Error: Unable to find the definition for Image (Next.js)

This new component in my next js project allows me to write a quote on an image and display it on the canvas. However, I am encountering an issue with the Image() function in JavaScript which typically runs on the browser. It seems that Next.js first execu ...

javascriptnext.jscanvas

Using jquery to update the overall quantity of likes

Utilizing jquery, html, and php, I have successfully implemented a like button on my page. However, I am currently facing an issue with displaying the total number of likes without refreshing the page. Upon clicking the like button, the jquery and php scr ...

phpjqueryhtml

Is it possible to create an HTML select that displays transparent text after a selection

I'm currently working on customizing the appearance of an HTML select element with various background color options. Everything is functioning properly, but I have a specific requirement. I want the text in the dropdown options to be visible only when ...

jqueryhtmlcolorshtml-select

Tips for securely sending hidden data in a Django POST form

In the process of developing a chat website, I am encountering an issue where I need to include invisible information within the message form in order to specify the recipient's username and successfully send the message. I am seeking suggestions on h ...

htmldjangoforms

Dynamic list item not responding to JQuery event handler

I am encountering an issue with the code below, specifically related to the <li> element that is being dynamically inserted by jQuery. The Click event on <li> does not seem to be firing at all. Should I utilize .on() or .delegate() in this sce ...

jquery

What steps should be taken to ensure the proper functioning of og: meta tags in NextJS?

Adding OpenGraph meta tags to a page in my NextJS app has presented some challenges. I inserted the meta tags within the <Head> component that is accessible through next/head. After testing the OpenGraph data with tools like the Facebook Sharing Deb ...

javascriptnext.jsfacebook-opengraph

The scroll function remains unchanged when using overflow-y scroll and border radius

I need help with styling a div that will contain a large amount of text on my webpage. I want to use the overflow-y property for scroll, but the issue arises when trying to style the scroll bar with a radius. Check out this jsfiddle link for reference: ht ...

javascriptjqueryhtmlcss

What causes useEffect to trigger twice when an extra condition is included?

Attempting to create a countdown timer, but encountering an interesting issue... This code triggers twice in a row, causing the useEffect function to run twice per second. 'use client' import {useState, useEffect, useRef} from 'react' ...

javascriptreactjsnext.js

What is the reason for being able to access `$scope` and `this` using the controller as syntax?

Creating an Angular controller with the controller as syntax: <body ng-controller="ctrl as myCtrl"> <p>Accessed via scope resolution: {{ foo }} </p> <p>Accessed via controller resolution: {{ myCtrl.foo }}</p> </body> ...

javascriptangularjsangularjs-scopeangularjs-controller

No matter what I attempt, my presentation refuses to align in the center

My slideshow, which is powered by jQuery/JS and involves absolute positioning for each image, is causing me trouble when trying to horizontally center it on the page. No matter what I do, I can't seem to get it right. The challenge is not only getting ...

javascriptjqueryhtmlcssslideshow

Incorporate a Captcha image into your Laravel application without the need for any additional packages

After successfully uploading a laravel app, my boss requested that I add a captcha image to the website. However, all the captcha techniques for Laravel I've researched require installing a package, and I'm hesitant to reupload the entire website ...

phphtmlcsslaravelcaptcha

Error in validating Bootstrap 3 Datepicker and DateTime data

I have implemented Bootstrap 3 Datepicker () to display a DateTime Picker for a specific model property: Model: [Table("Calls")] public partial class Call { [Key] [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)] public int Id { ...

c#jquerytwitter-bootstrapdatetimedatepicker

"Although all error messages are functional in Postman, they are not appearing correctly on the frontend client

I am currently developing a website using React and Node. While testing my register and login functionality in Postman, I encountered an issue where the error message for login (e.g., user doesn't exist, username or password incorrect) is not displayi ...

javascriptnode.jsreactjspostman