Reposition a Single Item on the Top Menu to the Right

I'm new to HTML and CSS and I need help aligning the "Login" item to the right. I'm trying to create a horizontal menu bar, but not sure if I'm approaching it correctly. Something similar to this: How I want it to be

Here is the code I have:

HTML:

@import url("FONTS/stylesheet.css");
body {
    font-family: 'Roboto', sans-serif;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    display: inline-block;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
  <a class="loginnav" href="#login">Login</a>
</div>

</body>
</html>

What changes do I need to make? Thank you for your help!

htmlcssalignmenttext-align

Answer №1

If you want to align your login navigation to the right in your CSS, simply add this code snippet: .topnav .loginnav {float:right;}

@import url("FONTS/stylesheet.css");
body {
    font-family: 'Roboto', sans-serif;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    display: inline-block;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}


.topnav a:hover {
    background: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
.topnav .loginnav {
    float: right;
}
<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
  <a class="loginnav" href="#login">Login</a>
</div>

</body>
</html>

Answer №2

Here's a suggestion:

@import url("FONTS/stylesheet.css");
body {
    font-family: 'Roboto', sans-serif;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    display: inline-block;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.right {
position: absolute;

top: 8px;
right: 8px;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<body>

<div class="topnav">
  <div class="left">
  <a class="active" href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
  </div>
  <div class="right">
  <a class="loginnav" href="#login">Login</a>
  </div>
</div>

</body>
</html>

This might not be the best approach, but it does get the job done!

Answer №3

Update the .topnav class to have display: flex, and include margin-left: auto; in the .loginnav class:

body {
  font-family: 'Roboto', sans-serif;
}

.topnav {
  display: flex;
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  display: inline-block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background: #ddd;
  color: black;
}

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

.loginnav {
  margin-left: auto;
}
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
  <a class="loginnav" href="#login">Login</a>
</div>

Answer №4

Simply include the following lines in your script.

    .loginnav{
        padding-right:500px;
    }

Answer №5

To align the login to the right using flex, you can simply apply the following CSS rules:

body {
    font-family: 'Roboto', sans-serif;
}

.topnav {
    background-color: #333;
    overflow: hidden;
    display: flex;
}

.topnav a {
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.loginnav {
    margin-left: auto
}

.topnav a:hover {
    background: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
  <a class="loginnav" href="#login">Login</a>
</div>

</body>
</html>

Please note that I have removed the inline-block property from the a tag and added the display: flex; rule to the .topnav class.

By setting it as flex and then aligning the items at the end, you can achieve the desired layout.

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

Conceal the HTML element within a subscription

Currently, I am utilizing Angular and have a checkbox that I need to toggle visibility based on the response of an API call subscription. The issue lies in a delay when trying to hide the checkbox (as it is initially set to visible). My assumption is that ...

htmlangulartypescriptangular-material

Is there a way to initiate an Edge animation when an onclick event occurs?

I am interested in incorporating an interactive Adobe Edge animation that activates upon the click of a conventional HTML form button. Could you please guide me on how to achieve this? ...

cssonclickhtml5-animationadobe-edge

Identifying and handling overlay blockers using Selenium technology

Currently, I am conducting tests on a website that utilizes in-browser pop-ups to display details about objects. These pop-ups are occasionally modal, meaning they render the rest of the screen unusable and activate a gray transparent overlay that covers e ...

cssselenium

Is it possible to transfer my Bubble webpage to another hosting server?

Can I export the "Code" from bubble.io to create my own server? Appreciate any help! ...

htmlweb

Extract the text from an html element by utilizing xpath

This snippet contains HTML content <p class="ref Hover"> <b class="Hover Hover Hover Hover Hover">Manufacturer Part Number:</b> MC34063ADR2G<br> <b>Mounting Method:</b>&nbsp; Surface Mount& ...

htmlxmlxpathselenium-webdriverxml-parsing

Transforming beautifulsoup content back into HTML format

Currently, I'm utilizing beautifulsoup to extract, parse, and modify an HTML document. The process seems to be functioning flawlessly; however, upon converting the soup object back into HTML using prettify(formatter="html"), I've notice ...

pythonhtmlbeautifulsoup

Avoiding conflicts: Using Tabs with Revolution Slider without jQuery interference

I'm running into an issue with the tabs on my website. The revolution slider is working perfectly, but the tab widget seems to be displaying all the tab contents at once instead of each one separately. You can see the problem here: at the bottom of t ...

javascriptjqueryhtmltabsjquery-ui-slider

Is it possible to create a popup without using JavaScript?

Is it feasible to create a popup window without utilizing JavaScript by using the href tag or a similar method? For example, could something like <a href="popup:http://stackoverflow.com">Stackoverflow Popup</a> be used where the popup: functio ...

htmlhref

Struggling to create a flawless gradient fade transition

Looking to create a gradient overlay on my images for a specific effect: The goal is to have the gradient darker at the bottom, while leaving the top unaffected by the darkness. I attempted the following code: @include linear-gradient(to top, rgba(0,0,0 ...

csslinear-gradients

Changing the look of your website with PHP and a drop-down selection bar

Recently, I implemented a drop-down menu that allows users to choose a theme for the website. While this feature works fine, I'm facing difficulty in loading the selected theme upon pressing the "Apply" button as I am fairly new to PHP. I am aware tha ...

phpcssformsdrop-down-menucookies

Navigating through the realm of Android development entails understanding how to manage a multi-object function in JavaScript when using

In order to load an HTML page using the webview component and handle its functions, I am faced with a challenge. The HTML page contains a multi-object named (webkit.messageHandlers.adClicked). How can I utilize the webView.addJavascriptInterface() functi ...

javascriptandroidhtmlwebview

The background-size property fails to function properly on mobile devices

It's really puzzling why this issue is happening, perhaps it's due to my fatigue. The problem lies in the fact that the "background-size" property isn't functioning on my mobile devices; however, it works perfectly when I try to simulate it ...

htmlcssmobile

Retrieve the current width and height of an image after the maximum width and height constraints have been applied

Check out this example The HTML: <div class="container"> <img src="http://placehold.it/500x500" alt="500x500" /> </div> <div class="container"> <img src="http://placehold.it/100x500" alt="100x500" /> </div> < ...

jqueryhtmlcss

Unable to make changes to the data

Journey Route::resource('/videofile', 'VideoController'); VideoController public function update(Request $req, $id){ $video = Video::findOrFail($id); if($req->hasFile('UserVideo')){ $vid = $req->file(& ...

phpjqueryajaxhtmllaravel-5

Expand the <div> by clicking on it, then hover away to return it to its normal size

One interesting feature I have on my website is a <div> that expands when clicked, and returns to normal size with another click. However, I am looking for something a bit different... What I want is for the <div> (with the class name .topHead ...

javascriptjquerycss

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

I am trying to make a URL call from JavaScript with a single parameter, and the URL should respond to that specific request. Here is an example of the response format: {"success":true, "result": {"token":"4fc5ef2bd77a3","serverTime":1338371883,"expireT ...

javascriptajaxhtml

Creating a stylish design: integrating a progress bar within a card using Bootstrap 5

I'm currently delving into the world of bootstrap and I'm curious about how to incorporate a progress bar into a card layout to enhance my design skills. I experimented with inline-block and inline display properties, but they didn't yield t ...

htmlcssflexboxbootstrap-5

Position the text in the exact center of an HTML element using absolute positioning

Hey there! I am currently working on a website and I'm trying to create a simple delete button that can be used throughout the site. However, I'm having trouble getting it positioned correctly... Here's what I have so far: <button id="c ...

htmlcss

Display 3 images with the carousel feature on the middle image

Currently, I am utilizing the jquery.jcarousellite plugin and attempting to make the second image active. Below is the code snippet I have tried: <div id="jcl-demo"> <div class="custom-container auto moreItems "> <a href="#" c ...

jqueryhtmlcss

"Emphasizing the Html.ActionLink menu for improved user navigation and

Currently, I am facing an issue with my menu. I want to clear previously visited links while keeping the current one styled as a:visited in CSS. Although I have attempted to achieve this, unfortunately, the code is not functioning properly. Here is what I ...

javascriptjquerycss