Tips for centering links in the navigation bar on Bootstrap 5 when viewing in a small size

I had previously inquired about customizing the Bootstrap 5 navbar in this post:

Adjust navbar height to be smaller

and I received some helpful answers. Thank you to everyone who responded. However, I now have a follow-up question:

I am interested in changing the alignment of the links in small view.

Here is my current code snippet:

<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 appears:

https://i.sstatic.net/ppDiB.jpg

I would like to achieve this look instead:

https://i.sstatic.net/T1b6n.jpg

In attempt to address this, I created a separate CSS file for the smallest view with the following adjustments:

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

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

While this resolved the horizontal alignment issue:

https://i.sstatic.net/HyPzt.jpg

However, it seems to have affected the vertical alignment and text decorations 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 achieve the vertical alignment as shown here (red line indicating alignment): https://i.sstatic.net/wb7wU.jpg

But without underlining the links. Are there better methods to accomplish this?

Thank you,

--

Updated Screen Capture: https://i.sstatic.net/OvXcrG18.jpg

cssbootstrap-5

Answer №1

Utilize flexbox.

.nav is already set as a flex element. Use flex: 0 0 150px or adjust the width as needed for your layout.

In simpler terms, you should have

flex-grow: 0;
flex-shrink: 0;
flex-basis: 150px;

This will ensure that your elements remain aligned and maintain a consistent width (child elements won't expand or shrink).

.nav-item {
  flex: 0 0 150px;
  display: flex;
}
<div class="container">
  <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>

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

Answer №2

Why bother creating custom CSS styles for your links when you can simply utilize Bootstrap classes to control how they appear on smaller screens?

For instance, by applying mx-sm-auto, ms-sm-5, and me-sm-5 to the PowerPoint link, you can adjust its behavior specifically for smaller devices.

To learn more about Bootstrap breakpoints, check out Breakpoints-v5. Additionally, for information on spacing utilities, visit Spacing-v5.

Answer №3

Perhaps this might not be the optimal solution, but you could experiment with this approach:

 <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>

Oftentimes, resorting to the bootstrap grid system can be a lifesaver in such scenarios.

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

Discovering a particular string within a jQuery array object: Tips and tricks

One thing that is confusing me is the jQuery array object. To explain further: I have two arrays, one called brandsLink and the other called floorLink. When a user clicks on a link, I am saving the brand name in a variable called brandName, and then checki ...

javascriptjqueryhtmlcss

Tips on keeping the size of a react-bootstrap modal constant and enabling scrolling instead of expanding

<Modal size="lg" scrollable show={showInvModal} onHide={handleCloseInvModal}> <Modal.Header closeButton> <Modal.Title>Check out our latest items!</Modal.Title> </Modal ...

cssreactjsbootstrap-4bootstrap-5

IE7, IE6 display margins differently compared to other browsers

Can anyone help with an issue I'm having with a CSS ul list menu? #header-container #header ul.top-nav { float: left; margin: 20px 0 20px 10px; } #header-container #header ul.top-nav li { float: left; margin-right: 8px; border-rig ...

css

alignment not behaving as anticipated

My goal is to position two elements on different sides within a container. Although in my coding scenario, these elements are meant to be on opposite ends of a div, for the sake of explanation, let's consider them being on opposite sides of the browse ...

htmlcsshtml-tabletext-alignment

Difficulty in making Materialize.css column match the height of the entire row

Utilizing React.js, Materialize.css, and certain MaterialUI components in collaboration to build a website. Developed a header (React component, basic div with title and logout button) for the site using a Materialize.css "grid". Issue: The react compone ...

cssreactjswebmaterial-uimaterialize

Tips for changing the default height of Elastic UI dropdown menus

I am attempting to adjust the height of the Task combobox to match that of the Date Picker, but the styling is not being applied when done through a class or inline. https://i.sstatic.net/3Cua1.png I have tried inline styling the element as: <EuiForm ...

cssreactjssass

How to prevent the scroll bar from affecting a fixed div located at the top of the page

Check out this website: I am struggling with setting up a fixed menu div at the top and a content div below it on my site. I want the scroll bar to only apply to the content div and not the header div at the top, but I can't seem to figure out how to ...

htmlcssscrollbaroverflow

What is the process by which the browser displays pseudo-element selectors?

One thing that's been on my mind is the potential resource cost of using *:after. Would the pseudo element be the primary selector, or would all elements still be processed by the client? In simpler terms, what impact does *:after have compared to ju ...

csscss-selectorspseudo-elementcss-content

Solve the problem with SCSS at the component level in NextJS

I've decided to transition my regular React app to Next.js. In the past, I would simply import SCSS files using: import from '.componentName.scss' However, now I need to import them using: import style from 'componentName.module.scss ...

javascriptcssreactjssassnext.js

Animating a dotted border path in SVG for a progress bar effect

I am attempting to create an animation for a dotted SVG circle that resembles a progress bar, where it fills itself over a duration of 3 seconds. However, I am facing difficulties in achieving this effect with the dotted border. The current code I have doe ...

javascriptjquerycssanimationsvg

Transitioning the Background Image is a common design technique

After spending hours trying to figure out how to make my background "jumbotron" change images smoothly with a transition, I am still stuck. I have tried both internal scripts and JavaScript, but nothing seems to work. Is there any way to achieve this witho ...

javascripthtmlcssbootstrap-5

Having trouble applying styles to a component using forwardRef

I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...

javascripthtmlcssreactjs

The application of border-radius to a solitary side border forms a unique "crescent moon" shape rather than a traditional semi-circle

Is there a way to transform this shape into a regular semicircle, avoiding the appearance of a moon, and change the image into a circle rather than an ellipsis? http://jsfiddle.net/226tq1rb/1/ .image{ width:20%; border-radius:500%; border-rig ...

css

Unique style sheet for unique content block

Recently I made some custom modifications to a block by adding style attributes directly into the .phtml file between tags. Now, I am looking to create a separate file for my block so that it can use a custom .css file. Where should I place this new file? ...

cssfrontendblock

Ways to turn off Bootstrap links hover background color?

I recently added a Bootstrap menu to my website that I'm currently working on. I am curious about how to disable the hover background color for Bootstrap links. Here's the situation: Below is an example of the menu I implemented: Currently, whe ...

htmlcsshyperlinkhoverbackground-color

Styling with CSS: Changing the Background Color of Text

Looking for a solution to apply line-height to text without affecting the background color? Check out the code snippet below and share your ideas if you have any. Thanks! .nb-semnox-impact-grid { display: block; font-size: 6 ...

htmlcss

Positioning of the footer using CSS: A query

What is the best way to position a footer if we know its height? For instance, if the height of the footer is 100px: footer { position:absolute; bottom: 100px; background: red; } If this approach is not recommended, could someone assist m ...

css

Creating a responsive slider in CSS that matches this specific design

Looking to create a responsive sidebar based on this specific design https://i.sstatic.net/YKy6Z.png https://i.sstatic.net/qwTuJ.png Link to design on Figma Key focus is implementing the "< 4/12 >" functionality and ensuring it is respo ...

htmlcssreactjsvue.jsresponsive

Is it possible to modify the border colors of separate elements in Bootstrap 5?

<div class="m-3 p-3 border-5 border-top border-danger border-bottom border-primary"> Can borders be styled with different colors? </div> Is there a method to achieve this, possibly using sass? ...

csstwitter-bootstrapbootstrap-5

Looking to prevent horizontal scrolling on smartphones in an HTML webview - how can I do this?

Currently, I am dealing with a webview and encountering some peculiar behavior. The overflow-x property is set to hidden, which works perfectly on browsers. However, when accessed on a mobile device, the overflow seems to be ignored completely. Here is t ...

htmlcsswebview