Is there a way to customize the navbar layout so that link 1 is aligned to the right side, link 2 is centered, and link 3 is positioned on the right?

I attempted to utilize the flex property and justify content, but unfortunately that did not yield the desired result. I experimented with the code provided below.

The goal is to create a website layout with a logo at the top and a navigation bar directly underneath, as depicted in the image linked here: view site preview


    <header class="top-part">
       <div class="logo"> 
        <img class="logo" src="images/logo.png" height=100px width="237px"   >
       </div>
       <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ">
            <li >
              <a class="nav-link" id="home"href="#">link 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="cart" href="#">link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="contact"href="#">link 3</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
</head>




css :
    @media screen and (min-width:777px){
    .nav-link {
      padding:18px 0;
      min-width:120px;
    }
    .navbar {
      padding: 0
    }
  }

.header{
    position:sticky ;
    top: 0;
}

Answer №1

If you're new to web development, I suggest starting with some research and hands-on practice in HTML/CSS to grasp the fundamentals and understand how things work.

When it comes to the example at hand, delving into 'flexbox' would be beneficial!

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5cbd5c9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header class="d-flex flex-column align-items-center">
    <img style="width: 100px;" src="https://images.unsplash.com/photo-1605666807892-8c11d020bede?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJhbmFuYXxlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
    <nav class="w-100 d-flex bg-light">
      <a class="p-2 bd-highlight text-black-50 text-decoration-none" href="">link 1</a>
      <a class="p-2 bd-highlight text-black-50 text-decoration-none" href="">link 2</a>
      <a class="p-2 bd-highlight text-black-50 text-decoration-none" href="">link 3</a>
    </nav>
  </header>

Answer №2

header {
  width: 100%;
  text-align: center;
}
a:first-of-type{
  float: left;
}
a:last-of-type{
  float: right;
}
<header>
  <img style="width: 100px;" src="https://images.unsplash.com/photo-1605666807892-8c11d020bede?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJhbmFuYXxlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
  <nav>
    <a href="">link 1</a>
    <a href="">link 2</a>
    <a href="">link 3</a>
  </nav>
</header>

Answer №3

One way to achieve this is as follows:

Include the classes d-flex, flex-row, and justify-content-center in the parent div that contains your logo.

You can also add these classes to the parent div of the links (ul and li elements).

Since your links are currently left-aligned, you can apply the class "text-center" to your <ul> element.

Your code should look similar to this:

<header class="top-part">
       <div class="logo d-flex flex-row justify-content-center"> 
        <img class="logo" src="images/logo.png" height=100px width="237px"   >
       </div>
       <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse  d-flex flex-row justify-content-center" id="navbarNavDropdown">
          <ul class="navbar-nav text-center">
            <li>
              <a class="nav-link" id="home" href="#">link 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="cart" href="#">link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="contact"href="#">link 3</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

Another thing to keep in mind is that I noticed your code ends with </head>. Make sure you place this block of code within the <body> of your website rather than in the <head> section :)

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

Show the initial instance following a nested class

I need the first .tab class that directly follows the .tab-wrapper class to be visible, while the others should remain hidden <ul class="tabs"> <li>1</li> <li>2</li> </ul> <div class="tab-wrapper"> &l ...

Assistance needed in handling a form with the use of $_POST and $PHP_SELF

Let me explain my goal in creating a webpage using HTML and PHP. The webpage will feature multiple forms to gather user inputs for future use. My plan is to reveal each form only after the previous one has been submitted. Here are the 3 forms: First name ...

Using AngularJS to load a custom JavaScript file within an ng-view

In my sample project, I have utilized Angular Js for the front-end. I have developed a template and implemented dynamic loading of views based on requirements. For this application, I am utilizing angular, jquery, and cusotm js. The structure of my templat ...

Top jquery CSS selector for locating a table's colspan in Internet Explorer

Does anyone know a more efficient way to find the colspan of table cells in IE, specifically when it's other than 1? The current selector I'm using feels clunky. Any suggestions on how to improve this? if (isIE) { selector = "> tbody > ...

Remove checked rows in a table with a single click

I have created a table with a list and checkboxes next to each element. There is also a Delete button that I want to connect to the delete operation. Here is the code for the Delete button: <tr id="deleteproject" > <td wi ...

CodeIgniter - Utilizing quotes within a form

Consider a scenario where the database has a field named NAME which contains text with both single and double quotes: TEST1 "TEST2" 'TEST3' Now, if you want to edit this value using the following code in a form: <label for="name">Ful ...

How can I add content using HTML or JavaScript?

How can I append a .txt file using HTML or Java without ActiveX prompts getting in the way? It's becoming quite annoying! Is there a simple way to script this task without having to deal with ActiveX? The current script snippet looks something like ...

The size of the panel header does not seem to be adjusting as expected within the React

I need help adjusting the header size in a React-Bootstrap Panel within a Typescript application. I've tried wrapping the text in <h1> tags as specified in the documentation, but there seems to be no change. Even with attempts to add inline sty ...

"Including Span icons, glyphs, or graphs within a table cell in AngularJS based on a specified condition or numerical

I'm attempting to incorporate span icons/glyph-icons using Angular within a td before displaying the country. I've utilized the code below to achieve this, but I'm looking for a more dynamic and elegant solution. Your assistance is greatly a ...

Error: The document object is not defined when attempting to access it within a

<script type="module" src="/scripts/navbar.js"></script> <script> async function fetchContent(e) { e && e.preventDefault(); const response = await fetch('https: ...

Trigger a database update upon clicking the submit button

Greetings! I am a newcomer to the world of PHP and have scoured Stack Overflow for solutions to no avail. My query revolves around updating a database when a submit button is clicked. Below, you will find the code associated with this submit button. <? ...

transfer chosen data from a text box to a dropdown menu

Looking for: I am in need of a feature where users can input a movie title in a textbox and upon clicking the "move to selectedlist" button, the entered movie title should be added to a dropdown list that displays all the movies selected by the user. Addit ...

Angular is having trouble properly rendering the Array Description

I'm currently working on a project using .net core MVC with an Angular frontend. I am facing an issue where the description of parameter arrays is not displayed in the output, even though single parameters display correctly. How can I resolve this pro ...

Ways to incorporate radio buttons, checkboxes, and select fields into a multi-step form using JavaScript

In the snippet below, I have created a multi-step form where users can provide details. The issue is that currently only text input fields are being accepted. The array of questions specifies the type of input required for each question: Question no.1 req ...

Using AJAX to showcase data from a table in a database using the <select> tag but with an unfinished submit process

I am encountering an issue with my code. When I submit the value in getinv.php, it only returns a partial value. For example, when I click '2016-08-27', it only retrieves '2016'... My question is, how can I ensure that the exact value ...

Tips on creating a keypress function for a div element with the contenteditable attribute

Hey there, I have managed to create a textarea within a div by using -webkit-appearance. However, I am currently struggling to add an event to this div on key press. I have been trying my best to figure it out but seem to be missing something. If you coul ...

Text parsing with jQuery

Hello fellow developers. I am interested in creating a text parser using jQuery. My goal is to develop a function that can take a string as input and convert it accordingly. Imagine we have a div with the following HTML structure: <div class="item"> ...

Turn the flipcard hover effect into an onclick action

After successfully creating interactive flip cards using CSS hover effects, I am now faced with the challenge of adapting them for mobile devices. I'm struggling to figure out how to translate my hover effects into onclick events for a mobile-friendl ...

What could be causing my jQuery animation to lack smoothness?

I am experiencing an issue where, after a delay, my element completely jumps across the screen to its new position when I animate its height. Strangely, this problem only occurs when using pixel values and not percentages. Unfortunately, I need to use pi ...

What steps do I need to take to make sure the Google font I downloaded is functioning properly in my React project

I have encountered an issue with using a Google font in my project... After downloading the font, I included the following CSS code: @font-face { font-family: "Work Sans"; src: local("Work Sans"), url(../src/Fonts/Work_Sans/Wor ...