Question 381554 in CSS Question posted in
Some basic documentation can be found here.

Css – How to adjust the alignment of links in the navbar in small view in Bootstrap 5

I previously asked a question about the Bootstrap 5 navbar here:

Adjust navbar height to be smaller

and I did receive answers that were helpful. Thank you. I do have a follow-up question:

I would like to change the alignment of the links in small view.

This is what I have:

<header>
    <div class="container fixed-top bg-white py-3">
      <header class="d-flex flex-wrap justify-content-center">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
          <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
          <span class="fs-4">Portfolio</span>
        </a>
  
        <ul class="nav nav-pills">
          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">About</a></li>
          <li class="nav-item"><a href="#" class="nav-link">PowerPoint</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Infographics</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Logos and Icons</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Web Design</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
        </ul>
    </div>
    </header>

This is how it currently looks:

enter image description here

I would like it to look like this:

enter image description here

What I tried was with a separate css file for the smallest view:

@media (min-width: 0px) {
.nav-link-powerpoint{
        margin-top: 5px;
        margin-left: 86px;
    }

    .nav-link-infographic {
      margin-top: 5px;
        margin-left: 39px;
    }

That did fix the horizontal alignment:

enter image description here

but now it seemed to override the vertical alignment and the text-decoration-none in this section:

<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">

Is there a way to align it vertically like this (the red line is to show the alignment) :
enter image description here

But without the underline for the links. Is there a better way to do this?

Thank you,

Tags:

2

Answers


  1. 0

    Instead of using your own written css to style the links, why not use bootstrap classes for breakpoints on the elements you want to style differently on smaller screens.

    For example, you can set mx-sm-auto or ms-sm-5 and me-sm-5 on the powerpoint link to make it behave differently on smaller screens.

    You can read more about bootstrap breakpoints here Breakpoints-v5 and spacing here Spacing-v5

    Login or Signup to reply.
  2. 0

    Maybe this is not better way, buy you can try this :

     <header>
<div className="container fixed-top bg-white py-3">
  <header className="d-flex flex-wrap justify-content-center">
    <a
      href="/"
      className="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"
    >
      <svg className="bi me-2" width={40} height={32}>
        <use xlinkHref="#bootstrap" />
      </svg>
      <span className="fs-4">Portfolio</span>
    </a>
    <ul className="nav nav-pills">
      <div className="row">
        <li className="nav-item col-sm-2 col-4">
          <a href="#" className="nav-link active" aria-current="page">
            About
          </a>
        </li>
        <li className="nav-item col-sm-2  col-4">
          <a href="#" className="nav-link">
            PowerPoint
          </a>
        </li>
        <li className="nav-item col-sm-2  col-4">
          <a href="#" className="nav-link">
            Infographics
          </a>
        </li>
        <li className="nav-item col-sm-2 col-4">
          <a href="#" className="nav-link">
            Logos and Icons
          </a>
        </li>
        <li className="nav-item col-sm-2 col-4">
          <a href="#" className="nav-link">
            Web Design
          </a>
        </li>
        <li className="nav-item col-sm-2 col-4">
          <a href="#" className="nav-link">
            Blog
          </a>
        </li>
      </div>
    </ul>
  </header>
</div>

    Most of the time in these situations, using bootstrap grid system saves life.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search