Guide on placing the navigation elements at the top right corner

Question

Guide on placing the navigation elements at the top right corner

<header class="top-header">
    <div class="container">
        <div class="logo">
            <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo">
        </div>

        <nav class ="top-nav">
            <ul>
                <li class="current"><a href="index.html">Link A1</a></li>
                <li><a href="">Link A2</a></li>
                <li><a href="">Link A3</a></li>
            </ul>
        </nav>

    </div>
</header>

<nav class="navigation-menu">
    <ul>
        <li><a href="#">Link B1</a></li>
        <li><a href="#">Link B2</a></li>
        <li><a href="#">Link B3</a></li>
        <li><a href="#">Link B4</a></li>
    </ul>
</nav>

This code snippet represents the content of my index.html file.

Below is a section from my CSS file:

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

/*Other styling rules and imports are included...*/

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

nav.top-nav > ul > li > a{
    color :#fff;
    text-decoration: none ;
    padding : 30px ; 
    text-align : right ;
}


header.top-header { 
    margin-top : 10px;
    background-color : #FFF;
    height :100px;
}

nav.navigation-menu > ul > li > a {
    color : #FAB301  ;
}

An image can be viewed here.

I am trying to position the Link A elements to the top right-center of the navigation in the top-header class. Any suggestions on how to achieve this?

html css

Answer 1

Answer №1

Here is the code to add:

.top-nav {
  float: right;
}

The float CSS property determines whether an element should be positioned on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the webpage while still being a part of the layout, unlike absolute positioning.

Reference:https://developer.mozilla.org/en/docs/Web/CSS/float?v=example

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

/*@import "heading.css" ; */

/*Main Elements*/

* {
  - margin: 0;
  border: 0;
  padding: 0;
}

body {
  background-color: #ececec;
  font: 14px/20px'Nunito', 'sans-serif';
  color: #444;
  margin: 0;
}

.wrapper {
  margin: 0 auto;
  width: 70%;
  clear: both;
}

.container {
  margin-left: 30px;
  margin-right: 30px;
}

img#logo {
  height: 80px;
  width: auto;
  margin: 10px;
}

ul {
  list-style: none;
}

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

.top-nav {
  float: right;
}

nav.top-nav>ul>li>a {
  color: #fff;
  text-decoration: none;
  padding: 30px;
  text-align: right;
}

header.top-header {
  margin-top: 10px;
  background-color: #FFF;
  height: 100px;
}

nav.navigation-menu {
  background-color: #444;
  color: #fff;
  height: 50px;
}

nav.navigation-menu>ul>li>a {
  color: #FAB301;
}

<header class="top-header">
  <div class="container">
    <div class="logo">
      <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo">
    </div>

    <nav class="top-nav">
      <ul>
        <li class="current"><a href="index.html">Link A1</a></li>
        <li><a href="">Link A2</a></li>
        <li><a href="">Link A3</a></li>
      </ul>
    </nav>

  </div>
</header>

<nav class="navigation-menu">
  <ul>
    <li><a href="#">Link B1</a></li>
    <li><a href="#">Link B2</a></li>
    <li><a href="#">Link B3</a></li>
    <li><a href="#">Link B4</a></li>
  </ul>
</nav>

Answer 2

Here is the code to add:

.top-nav {
  float: right;
}

The float CSS property determines whether an element should be positioned on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the webpage while still being a part of the layout, unlike absolute positioning.

Reference:https://developer.mozilla.org/en/docs/Web/CSS/float?v=example

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

/*@import "heading.css" ; */

/*Main Elements*/

* {
  - margin: 0;
  border: 0;
  padding: 0;
}

body {
  background-color: #ececec;
  font: 14px/20px'Nunito', 'sans-serif';
  color: #444;
  margin: 0;
}

.wrapper {
  margin: 0 auto;
  width: 70%;
  clear: both;
}

.container {
  margin-left: 30px;
  margin-right: 30px;
}

img#logo {
  height: 80px;
  width: auto;
  margin: 10px;
}

ul {
  list-style: none;
}

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

.top-nav {
  float: right;
}

nav.top-nav>ul>li>a {
  color: #fff;
  text-decoration: none;
  padding: 30px;
  text-align: right;
}

header.top-header {
  margin-top: 10px;
  background-color: #FFF;
  height: 100px;
}

nav.navigation-menu {
  background-color: #444;
  color: #fff;
  height: 50px;
}

nav.navigation-menu>ul>li>a {
  color: #FAB301;
}

<header class="top-header">
  <div class="container">
    <div class="logo">
      <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo">
    </div>

    <nav class="top-nav">
      <ul>
        <li class="current"><a href="index.html">Link A1</a></li>
        <li><a href="">Link A2</a></li>
        <li><a href="">Link A3</a></li>
      </ul>
    </nav>

  </div>
</header>

<nav class="navigation-menu">
  <ul>
    <li><a href="#">Link B1</a></li>
    <li><a href="#">Link B2</a></li>
    <li><a href="#">Link B3</a></li>
    <li><a href="#">Link B4</a></li>
  </ul>
</nav>

Answer 3

Answer №2

CODEPEN

If you'd like the navigation menu options to be positioned all the way to the right side and aligned at the top of the screen, make the following adjustments:

nav.top-nav {
  position: fixed;
  right: 0;
  top: 0;
}
nav.top-nav > ul > li > a {
  color: #333;
  text-decoration: none;
  padding: 0 10px 0 0;
  text-align: right;
}

Answer 4

CODEPEN

If you'd like the navigation menu options to be positioned all the way to the right side and aligned at the top of the screen, make the following adjustments:

nav.top-nav {
  position: fixed;
  right: 0;
  top: 0;
}
nav.top-nav > ul > li > a {
  color: #333;
  text-decoration: none;
  padding: 0 10px 0 0;
  text-align: right;
}

Answer 5

Answer №3

To center it vertically, I would use absolute positioning over the top area and apply the following CSS properties:

top: 50%; transform: translateY(-50%));

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

/*@import "heading.css" ; */


/*CSS Styling for Main Elements*/

* {
  - margin: 0;
  border: 0;
  padding: 0;
}

body {
  background-color: #ececec;
  font: 14px/20px'Nunito', 'sans-serif';
  color: #444;
  margin: 0;
}

.wrapper {
  margin: 0 auto;
  width: 70%;
  clear: both;
}

.container {
  margin-left: 30px;
  margin-right: 30px;
}

img#logo {
  height: 80px;
  width: auto;
  margin: 10px;
}

ul {
  list-style: none;
}

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

nav.top-nav > ul > li > a {
  color: #fff;
  text-decoration: none;
  padding: 30px;
  text-align: right;
}

header.top-header {
  margin-top: 10px;
  background-color: #FFF;
  height: 100px;
}

nav.navigation-menu {
  background-color: #444;
  color: #fff;
  height: 50px;
}

nav.navigation-menu > ul > li > a {
  color: #FAB301;
}
  
.top-header .container {
    position: relative;
}
  
.top-nav {
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
}

<header class="top-header">
  <div class="container">
    <div class="logo">
      <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo">
    </div>

    <nav class="top-nav">
      <ul>
        <li class="current"><a href="index.html">Link A1</a></li>
        <li><a href="">Link A2</a></li>
        <li><a href="">Link A3</a></li>
      </ul>
    </nav>

  </div>
</header>

<nav class="navigation-menu">
  <ul>
    <li><a href="#">Link B1</a></li>
    <li><a href="#">Link B2</a></li>
    <li><a href="#">Link B3</a></li>
    <li><a href="#">Link B4</a></li>
  </ul>
</nav>

Answer 6

To center it vertically, I would use absolute positioning over the top area and apply the following CSS properties:

top: 50%; transform: translateY(-50%));

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

/*@import "heading.css" ; */


/*CSS Styling for Main Elements*/

* {
  - margin: 0;
  border: 0;
  padding: 0;
}

body {
  background-color: #ececec;
  font: 14px/20px'Nunito', 'sans-serif';
  color: #444;
  margin: 0;
}

.wrapper {
  margin: 0 auto;
  width: 70%;
  clear: both;
}

.container {
  margin-left: 30px;
  margin-right: 30px;
}

img#logo {
  height: 80px;
  width: auto;
  margin: 10px;
}

ul {
  list-style: none;
}

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

nav.top-nav > ul > li > a {
  color: #fff;
  text-decoration: none;
  padding: 30px;
  text-align: right;
}

header.top-header {
  margin-top: 10px;
  background-color: #FFF;
  height: 100px;
}

nav.navigation-menu {
  background-color: #444;
  color: #fff;
  height: 50px;
}

nav.navigation-menu > ul > li > a {
  color: #FAB301;
}
  
.top-header .container {
    position: relative;
}
  
.top-nav {
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
}

<header class="top-header">
  <div class="container">
    <div class="logo">
      <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo">
    </div>

    <nav class="top-nav">
      <ul>
        <li class="current"><a href="index.html">Link A1</a></li>
        <li><a href="">Link A2</a></li>
        <li><a href="">Link A3</a></li>
      </ul>
    </nav>

  </div>
</header>

<nav class="navigation-menu">
  <ul>
    <li><a href="#">Link B1</a></li>
    <li><a href="#">Link B2</a></li>
    <li><a href="#">Link B3</a></li>
    <li><a href="#">Link B4</a></li>
  </ul>
</nav>

Guide on placing the navigation elements at the top right corner

Answer №1

Answer №2

Answer №3

Similar questions

Instructions on allowing the user to enter text for searching through an array of objects, and displaying a message if a match is found. Use only pure JavaScript

Is there a trick for listening to mp3s on Android?

When the window is resized, the text and images become jumbled and distorted

Generating HTML using a filter

Enhance Your Website with HTML5 Video Transition Effects

I have tried to create two apps in AngularJS, but unfortunately, they are not functioning as expected

Error 404: Django failing to load image on the webpage

Is it possible to leverage specific client-side Javascript APIs on the server-side?

Tips for eliminating any default white space visible between tags:

Creating a loading screen with JQuery for an Ajax request

Ways to incorporate fixed CSS into a Dojo 7 application such as FontAwesome

Achieving Vertical Alignment of Text and Icon in the Same Line Using HTML and CSS

What is the best way to use jQuery to animate a particular height up to 100%?

Is it possible for a Bootstrap modal dialog to overlay another dialog window?

The error message "Undefined index" will only occur when trying to access the "file" field in an HTML form

Replicating radio button functionality using buttons in an HTML document

Display issue with Google Chart

Guide on how to append input field data to a table using jQuery

Tips for preventing Razor from interpreting special characters as HTML code

Tips for stacking objects vertically in mobile or tablet view using HTML and CSS