What is the best way to align my navigation links with my navbar?

In an effort to align my navigation links with the bottom of the navbar, I am working on positioning them below the navbar. Here is the desired layout: https://i.sstatic.net/eFL5r.png

The goal is for the red section to start from the bottom of the navbar. Below is my current code:

CSS

.nav {
    flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.nav-links {
  flex-direction: column;
  align-self: center;
  position: absolute;
  background-color: red;
  padding: 2rem;
  top: 10rem;
  width: 100%;
}

.nav-link {
  padding: 1rem 0;
}

HTML

<div className='nav'>
  <span className='logo'>Connect.</span>
  <nav className='nav-links'>
    <a href='#' className='nav-link'>Product</a>
    <a href='#' className='nav-link'>Features</a>
    <a href='#' className='nav-link'>Reviews</a>
    <a href='#' className='nav-link'>Pricing</a>
    <a href='#' className='nav-link'>FAQ</a>
    <button className='button'>download</button>
  </nav>
</div>
htmlcss

Answer №1

Incorporating the use of display flex in the navigation links themselves, along with align-items set to center instead of align-self.

.nav {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .nav-links {
    display:flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    background-color: red;
    padding: 2rem;
    top: 10rem;
    width: 100%;
  }
  .nav-links > a{
  text-decoration:none;
  color:white;
  }

  .nav-link {
    padding: 1rem 0;
  }
<div class='nav'>
      <span class='logo'>Connect.</span>
      <nav class='nav-links'>
        <a href='#' class='nav-link'>Product</a>
        <a href='#' class='nav-link'>Features</a>
        <a href='#' class='nav-link'>Reviews</a>
        <a href='#' class='nav-link'>Pricing</a>
        <a href='#' class='nav-link'>FAQ</a>
        <button class='button'>download</button>
      </nav>
    </div>

Answer №2

Initially, you have used className in your code example: <div className='nav'>, but it should be replaced with class like this: <div class='nav'>. Moreover, the code you provided is not yielding the expected results. Therefore, I have prepared some code snippets that can help you achieve the desired output. You are free to modify and optimize this code further according to your specific requirements.

HTML:

<div class='nav'>
    <span class='logo'>Connect.</span>
    <ul>
        <li><a href='#'>Product</a></li>
        <li><a href='#'>Features</a></li>
        <li><a href='#'>Reviews</a></li>
        <li><a href='#'>Pricing</a></li>
        <li><a href='#'>FAQ</a></li>
        <button class='button'>download</button>
    </ul>
</div>

CSS:

   ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 850px;
    width: auto;
    background-color: red;
  }
  
  li a {
    display: flex;
    flex-direction: column;
    color: #000;
    padding: 70px 0;
    text-decoration: none;
    text-align: center;
  }
  
  /* Change the link color on hover */
  li a:hover {
    background-color: transparent;
    color: white;
  }

.button{
    display: flex;
   margin: auto;
   padding: 7px;

}

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

Applying custom CSS designs to images using Thymeleaf

Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file. I have tested code that works: page.html <a class="nav ...

htmlcsstwitter-bootstrapspring-mvcthymeleaf

Why does my array seem to update only once in the view?

I am currently working on a project that aims to visually represent sorting algorithms, but I have encountered an issue. In order to effectively visualize the sorting process of an algorithm, it is crucial to display every change in the array as the proc ...

htmlarraysangulartypescriptsorting

How far apart are two surfaces when they are rotated along the Y-axis

Access Code: Click here to access the code I am trying to make sure that the red surface lies completely flat on top of the gray surface. However, there seems to be a gap (marked ??) between the two surfaces when I rotate 'modifier1'. How can I ...

javascripthtmlcssfamo.us

Tips for getting rid of unnecessary spaces between Html table cells in Html5

I have the following HTML script: <header> <div id="header"> <table class="headertable"> <tr> <td> <table clas ...

htmlcellspacing

Is it possible for CSS to accurately crop images by pixels [Sprite Box]?

I attempted to replicate the math used for the previous image cuts and added my own image, but it appears blank. Can you identify where the issue lies? #paymentForm { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webk ...

htmlcss

Stop HTML Select/Option from resetting following jQuery AJAX request

Something strange is happening. Here's the problem I'm facing. In my online application, there are three tabs where users can input and view data - List, Time Preference, and Search Results. In the Time Preference tab, users can choose from a se ...

phpjqueryhtmlweb-applications

Unusual occurrence with the nth-child selector

For the fiddle, click here - http://jsfiddle.net/ashwyn/a45ha/ To see the HTML code, take a look below: <div class="parent"> <div class="a">Class A</div> <div class="b">Class B1</div> <div class="b">Class B ...

jqueryhtmljquery-selectors

Printing long contents on Chrome's ion-modal-view is not supported on every page

I have tried various solutions found in articles but have not been successful. Here is an example of one such attempt: @media print { .modal { position: absolute; left: 0; top: 0; margin: 0; padding: 0; visibility: visible; / ...

javascriptcssprintingmodal-dialogionic-v1

Attempting to eliminate a div element housed within an iframe by utilizing the onload event

Is there a way to remove specific div tabs from within an iframe by using the onload function set within the iframe itself? I want everything to be in one location for simplicity. It's important to note that I want to utilize the onload WITHIN this &l ...

javascripthtmlcssiframeonload

Viewing the details of a checkbox option

I have encountered a situation where I need to handle detail rows within a table that contain checkboxes for selection. The desired behavior is: 1) When clicking on the detail row image, it should expand to show the details of its parent row without sele ...

jqueryhtmlcsscheckbox

Attempting to align HTML lines in a more compact manner

I can't seem to figure this out - I'm trying to stack three lines of text (one small, one big, one small) with single-spacing between them. However, no matter what I try, the larger font line always ends up with a double-space above it (for examp ...

htmlspacing

Is it possible to trigger a reflow prior to initiating a lengthy JavaScript operation?

Ready to face the criticism, I understand that this question has been asked many times before, and I am aware that there are likely more efficient ways to achieve what I'm trying to do... In a JavaScript function, I have a process that can take up to ...

javascriptjqueryhtmlcss

What could be causing the background image on my Jumbotron to fail to load?

Having some trouble with setting my image as the background of the Jumbotron. I've tried a few different approaches, but none seem to be working. It's not an issue with static loading because using img src directly into the Jumbotron section does ...

htmlcssdjango

Tips for changing the overall font style and modifying the $font-family-base variable in bootstrap

I currently have the font-family set on my form body as shown in this image: The current font However, I now require a different font-family for my form: The font family I wish to use This link explains that the default font has been replaced with a "nat ...

cssbootstrap-4fonts

Scrolling horizontally is an option depending on the content displayed on the screen

Imagine having a webpage structured like this: <header>...</header> <body> <section id="A">...</section> <section id="B">...</section> <section id="B2">...</section> <section id="C">...&l ...

javascriptjquerycssweb

Ensuring the accuracy of user input in JavaScript, even after fixing a mistake and submitting again, will not cause the code to exit the else clause

I am currently working on a coupon code field that needs to accept a specific set of coupon keys. Below is the code I have written for validation. If a user enters an invalid key at first, they receive an alert saying "Invalid Key." However, if they corr ...

javascriptjqueryhtmlarraysloops

What is the best way to dynamically update the selected option in a dropdown menu within a Rails application using a variable?

Working on a project that involves a select drop-down menu containing a list of currencies. Want to enhance user experience by automatically selecting the default value in the dropdown based on the user's country (will be utilizing the geoip gem). To ...

javascripthtmlruby-on-railsruby

Send form information using AJAX response

I have successfully implemented a feature where I load an iframe into a div with the id of #output using AJAX. This allows me to play videos on my website. jQuery( document ).ready( function( $ ) { $( '.play_next' ).on('click', fun ...

javascriptjqueryhtmlajaxforms

Tips for extracting data from a table's options:

Can someone help me with this HTML table issue? In columns col6 and col7, I have select elements that store different options. What I'm trying to do is retrieve all the data from the table based on the options selected in columns col6 and col7. Howev ...

javascripthtmlhtml-table

The Daterangepicker feature is experiencing technical difficulties when implemented on Web Pages using ASP.NET MVC

I'm encountering issues with the daterangepicker script obtained from the adminlte.io template, which isn't working on MVC web pages. Even though it runs fine in PHP, it seems to fail once I switch to asp.net MVC. <html> <head> ...

javascriptc#htmlasp.netasp.net-mvc