Open In App

How to create Right Aligned Menu Links using HTML and CSS ?

Last Updated : 21 Nov, 2019
Improve
Improve
Like Article
Like
Save
Share
Report

The right-aligned menu links are used on many websites. Like hotels website that contains lots of options in the menu section but in case of emergency to make contact with them need specific attention. In that case, you can put all the menu options on the left side of the navigation bar and display contact us option on the right side of the bar. This design will make the website more attractive than the regular menu links. To create the right align menu links you just need HTML and CSS. Menu links should contain an important menu list that you want to display on the right side. The below example will illustrate the approach of the concept.

Creating the Structure: In this section, we will create a basic website structure to create a right-aligned menu links.

  • HTML code to make the structure:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            How To Create Right Aligned Menu
            Links using HTML and CSS ?
        </title>
          
        <meta name="viewport"
            content="width=device-width, initial-scale=1">
    </head>
      
    <body>
          
        <!-- Navbar items -->
        <div id="navlist">
            <a href="#">Home</a>
            <a href="#">Our Products</a>
            <a href="#">Careers</a>
            <div class="navlist-right">
            <a href="#">About Us</a>
            <a href="#">Contact Us</a>
            </div>
        </div>
      
        <!-- logo with tag -->
        <div class="content">
            <h1 style="color:green; padding-top:40px;">
                GeeksforGeeks
            </h1>
          
            <b>A Computer Science Portal for Geeks</b>
              
            <p>
                How many times were you frustrated while
                looking out for a good collection of
                programming/algorithm/interview questions?
                What did you expect and what did you get?
                This portal has been created to provide
                well written, well thought and well
                explained solutions for selected questions.
            </p>
        </div>
    </body>
      
    </html>

    
    

Designing the Structure: In the previous section, we have created the structure of the basic website. In this section, we will design the structure for the navigation bar.

  • CSS code of structure:




    <style>
               
        /* styling navlist */
        #navlist {
            background-color: #0074D9;
            position: absolute;
            width: 100%;
        }
               
        /* styling navlist anchor element */
        #navlist a {
            float:left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            font-size: 15px;
        }
        .navlist-right{
            float:right;
        }
       
        /* hover effect of navlist anchor element */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>

    
    

Combining the HTML and CSS code: This is the final code after combining the above two sections. You can see that Home, Careers and Our Products align-left as default but About us and Contact us aligned right.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How To Create Right Aligned Menu
        Links using HTML and CSS ?
    </title>
      
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
          
    <style>
           
        /* styling navlist */
        #navlist {
            background-color: #0074D9;
            position: absolute;
            width: 100%;
        }
           
        /* styling navlist anchor element */
        #navlist a {
            float:left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            font-size: 15px;
        }
        .navlist-right{
            float:right;
        }
   
        /* hover effect of navlist anchor element */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
  
<body>
      
    <!-- Navbar items -->
    <div id="navlist">
        <a href="#">Home</a>
        <a href="#">Our Products</a>
        <a href="#">Careers</a>
        <div class="navlist-right">
        <a href="#">About Us</a>
        <a href="#">Contact Us</a>
        </div>
    </div>
  
    <!-- logo with tag -->
    <div class="content">
        <h1 style="color:green; padding-top:40px;">
            GeeksforGeeks
        </h1>
      
        <b>A Computer Science Portal for Geeks</b>
          
        <p>
            How many times were you frustrated while
            looking out for a good collection of
            programming/algorithm/interview questions?
            What did you expect and what did you get?
            This portal has been created to provide
            well written, well thought and well
            explained solutions for selected questions.
        </p>
    </div>
</body>
  
</html>


Output:



Previous Article
Next Article

Similar Reads

How to make div with left aligned text and right aligned icon using CSS ?
In this article, we will learn to create an HTML div that has left-aligned text and a right-aligned icon. Sometimes, we need to align the text to the left side &amp; if there is an image or icon used then align it to the right side. For this, we can use the display property by setting the value as a flex property that is used to display an element
3 min read
Primer CSS Select Menu Right aligned
Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. In this article, we'll see about Primer CSS Select Menu Right aligned. A
2 min read
Primer CSS Right Aligned
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
Bulma Right aligned Dropdown
Bulma is a CSS framework that can be used as an alternative to Bootstrap. It is based on flexbox. In this article, we will be seeing how to make a dropdown right-aligned in Bulma. To make a dropdown right-aligned, we just have to add the is-right modifier to the dropdown container. Bulma Right Aligned Dropdown Classes: is-right: This class is used
2 min read
How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS ?
We will know how to center-align the image in a div tag using CSS &amp; will also understand its implementation through the example. Given an image, we need to set the image that align to the center (vertically and horizontally) inside a bigger div. But first let's create a basic structure, in which inside the body tag with id=outer there is an img
2 min read
Difference between normal links and active links
Websites are designed to point you to different resources. You can move from one website to another through links. Links help you to get information from different resources. Links are established in simple HTML web pages through &lt;a&gt; tag.Links are categorized into three types. Typically a Link is displayed in three different colors based on t
2 min read
Pure CSS Aligned Form
Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, more beautiful, and more responsive websites. It can be used as an alternative to Bootstrap. Pure CSS Aligned Form is a type of HTML form that is used to
2 min read
How to create animated banner links using HTML and CSS?
Links are one of the most important parts of any component that is used in website making. Almost every component had some form of links in it. A common example is a menu/nav-bar. All we see is some button like home, about, etc. but under the hood they all are links. Sometimes there comes a situation where you don't want to wrap the link inside a b
2 min read
Foundation CSS Menu Vertical Menu
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
2 min read
How to set horizontal aligned accordion in Bootstrap 4 ?
Accordion vertical is quite popular in web development, but horizontal accordion is required in few cases to that in this article we will use pointer-events. We will take the writing mode to change the accordion title view. And use the transform to rotate the whole accordion. Below program illustrates the above approach: Program: C/C++ Code &lt;!DO
2 min read