Include an extra hyperlink in the adaptive menu bar

I have successfully created a responsive Navigation bar. Now, I would like to add an "Account" link on the right side of the navigation.

My initial thought was to insert a div into a ul element, but I realize that this may not be W3C compliant.

<div class="navigation">
<ul>
    <li><a href="#">Welcome</a></li>
    <li><a href="#">Me</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
    <div class="account">Account</div> 
</ul>
<a href="#" class="pull">Navigation</a>

If you'd like to see a demo, check out this JS Fiddle Demo

The main requirement is for the "account" link to appear on the right side of the navigation, not alongside the other navigation items. When the screen size is under 700px, it should display below the contact link.

Here's an example of how I want it to look:

Apologies for any language barriers. I hope my issue is clear, and I welcome any suggestions or solutions you may have.

javascriptjquerycssresponsive-designnavigation

Answer №1

Your CSS code .navigation li{ float: left;} is causing all the <li> elements to align to the left.

To fix this, include a new class account for the "Account" <li> tag as shown below:

<li class="account"><a href="#">Account</a></li>

Remember to add the following lines of code to your CSS:

.account{
    float: right !important;
}

View Updated JS Fiddle

Additionally, you'll need to adjust the media query width for the menu collapse as the "Account" section may now appear on a separate line just before the menu collapses on smaller screens.

Answer №2

UPDATE:

After realizing my initial response was incorrect, I have made some changes to provide a more accurate answer.

http://jsfiddle.net/AlexCharlton/bb26gau3/3/

<body>
<div class="navigation">
    <ul>
        <li><a href="#">Winterhalder</a></li>
        <li><a href="#">Me</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contact</a></li>
        <div class="account">
    <ul>
     <li><a href="#">Account</a></li>
    </ul>
</div>
    </ul>
    <a href="#" class="pull">Navigation</a>
</div>    
</body>

CSS:

.account {
   float:right;
}

Answer №3

Remove the .account div from the UL structure and then apply styling to it separately. Here is an example:

<div class="navigation">
<ul>
    <li><a href="#">Winterhalder</a></li>
    <li><a href="#">Me</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div class="account">Account</div>  <a href="#" class="pull">Navigation</a>
</div>

Next, include the following CSS styles:

`/* NAVIGATION */
.navigation {
width: 100%;
height: 50px;
background: #34495E;
position: fixed;
top: 0;
}
.navigation ul {
width: auto;
max-width:960px;
height: 50px;
margin: 0px auto;
padding: 0px;
float:left;
}
.account {
float:right;
margin:0px 20px
}
.navigation li {
display: inline;
float: left;
}
.navigation a, .account, .account a {
font: 400 14px Open Sans;
color: #FFF;
width: 140px;
line-height: 50px;
text-align: center;
display: inline-block;
}
.navigation a:hover, .navigation a:active {
color: #1abc9c;
}
.navigation a.pull {
display: none;
}
/* RESPONSIVE */
@media screen and (max-width: 960px) {
.navigation {
    height: auto;
}
.navigation ul {
    width: 100%;
    display: block;
    height: auto;
}
}
@media screen and (max-width: 560px) {
.navigation {
    height: auto;
}
.navigation ul {
    display: none;
}
.navigation li {
    display: block;
    float: none;
    width: 100%;
}
.navigation a.pull {
    display: block;
    background-color: #2C3E50;
    width: 100%;
    position: relative;
}
.navigation a.pull:after {
    display: inline-block;
}
.navigation a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
}
}`

You may need to make slight modifications based on your specific requirements, but this should guide you in the right direction. Check out this fiddle for reference.

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 validating updates in MongooseEnsuring data integrity is

My current Schema does not validate upon updating. Can you please point out where I went wrong and help me fix it? ...

javascriptnode.jsmongoose

Selenium throws an error message stating 'NoSuchAlertError: no alert is currently opened'

When using Selenium, I encounter an issue where clicking a button triggers an alert box, but accepting the alert box results in an error message. element.click(); driver.switchTo().alert().accept(); The problem is quite unpredictable. ...

javascriptnode.jsseleniumselenium-webdriverselenium-chromedriver

Displaying a base64 image in a new tab with JavaScript on iOS devices

Currently, I am receiving base64 data for an image and would like to open it in a new tab. To achieve this, my code looks something like this: var window = new window(); window.open("<iframe src="+base64Url+"); Interestingly, this method works perfec ...

javascripthtmlnode.jsreactjsreact-redux

The ng-model-options in Angular 2 is set to "updateOn: 'change blur'"

Currently working with angular 2, I am seeking a solution to modify the behavior of ngModel upon Enter key press. In angular 1.X, we utilized ng-model-options="{updateOn: 'change blur'}". How can this be achieved in angular 2? For reference, her ...

javascriptangularjsangulartypescript

Submit a form to the same page without reloading and toggle the visibility of a div after submission

Is there a way to submit a form without refreshing the page and hiding the current div while showing a hidden one? I attempted to use the following code, but it ends up submitting the form and reloading the page. <form method="post" name="searchfrm" a ...

phpjavascripthtml

Getting started with `sessionStorage` in a React application

Currently, I am attempting to save an item in sessionStorage prior to rendering. The code snippet I have looks like this: componentWillMount() { sessionStorage.setItem("isUserLogged", false); } However, I encountered an error stating th ...

javascriptreactjs

What sets apart the $ and $() functions in jQuery?

After reviewing the jQuery API, I noticed that $() represents a collection of matched elements. However, I am curious about the significance of $. An example from the imagesLoaded library is provided below. if ( $ ) { $.fn.imagesLoaded = function( opt ...

javascriptjquery

Align the text on the same horizontal line

I have been struggling with this issue for hours. Here is my Header.js <div className="navbar-inner"> <h2>Text1</h2> <h3>Text2</h3> </div> This is the content of my Header.css: .navbar-inner { ...

javascripthtmlcssreactjs

Manipulating viewport settings to simulate smaller screens on a desktop device

I am working with a parent container that contains Bootstrap div.row elements holding div.col-... child elements. I am using jQuery to adjust the width and height of the container dynamically to replicate mobile device sizes for users to preview different ...

javascriptjquerytwitter-bootstrapmedia-queriesviewport

error: local server did not return any data

I am currently using PHP on a Linux machine. In my HTML code, I have set up an AJAX request to the local Apache server (check http://localhost), with the intention of displaying the data from the server on the screen. However, for some reason, nothing is b ...

javascripthtmlajax

Tips for making sure AngularJS runs a function and its subfunction sequentially

How do I run the code below to display the details of each flavor and its corresponding ITEM ID in a specific order. Execution Format: Flavor1, Flavor2 -- Getflavors() Flavor1 ITEM1, ITEM2... -- GetItemIDs_ofeachFlavor(MapFlvID) GET ITEM1 DETAILS and ad ...

javascriptangularjsangular-promiseangular-http

What is causing the pull-right class to not function correctly in Bootstrap version 4.1.0?

After upgrading from Bootstrap version 3+ to 4.1.0, I encountered an issue with aligning elements using pull-right and pull-left, as well as float-right and float-left. The problem persists despite my efforts. Here is an image (https://i.sstatic.net/Z6ba3. ...

cssbootstrap-4

Implementing server authentication for page requests in a nodeJS and angularJS application

My application relies on passport.js for authentication. One of my main requirements is to prevent access to a specific page (e.g., '/restricted') for users who are not logged in. Currently, anyone can directly access the "localhost:3000/#/restr ...

javascriptangularjsnode.jsroutespassport.js

"Troubleshooting the inconsistency of GraphQL resolver context functionality between Playground and the client in the official NextJS starter

Currently, I am making adjustments to my NextJS/Apollo application to enable SSG with GraphQL API routes. I have referenced this official NextJS starter example as a foundation for configuring the client. An issue arose in my application which led me to g ...

javascriptgraphqlnext.jsapollo

HTML - Centered layout with a constant header and footer

Imagine a layout where there is always a header at the top, a footer at the bottom, and the space between them should be filled by the content 100% (image 2). Additionally, everything in the header, content, and footer should be horizontally centered, usin ...

htmlcsswrapper

Displaying content conditionally in Vue JS upon the initial page load

I am currently working on a Vue component that is supposed to render the first time a page is opened. However, I am facing some confusion regarding the logic behind this. My approach involves using localStorage to check for an item called 'wasVisited& ...

javascriptvue.js

-g option must be enabled for jscoverage to function properly

To install jscoverage globally, use the following command: npm install jscoverage -g Do you know what purpose the -g option serves? Without using the -g option, my system does not recognize jscoverage as a valid command. ...

javascriptnode.jsnpm

Displaying Local Storage Data in Primeng Dropdown

I'm looking to implement local storage for the selected dropdown option, allowing users to see the same selection when they reload the page. Here's my dropdown: <p-dropdown [options]="languages" [(ngModel)]="selectedLanguage ...

javascriptjsonangularlocal-storageprimeng

I'm having trouble getting my if statement to function properly with a random number

I'm currently working on creating a natural disaster sequence for my game, and I'm using Math.random to simulate different outbreak scenarios. However, I've encountered an issue at the end of my code where an if statement is supposed to trig ...

javascripthtml

Using Node.js and DIME to send binary data via POST requests

After reading a file that is 1740 bytes long into a Buffer called res, the length of res.length and res.toString('binary', 0, res.length).length is both determined to be 1740. A POST request is then sent using the request library. request.post ...

javascriptnode.jshttpbinary-data