Enhancing a Bootstrap 4 navbar menu system with padding tweaks

Just starting out with Bootstrap 4 and creating a practice page with a header to familiarize myself with the navbar system.

I have put together this jsFiddle (full code) for reference, but essentially, my page structure is as follows:

index.html

<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="javascript:void(0)">
    <img src="https://raw.githubusercontent.com/bitbythecron/bootstrap-troubleshooting/main/dummy-logo.png" class="img-fluid mainlogo" alt="Responsive image">
  </a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    
    <!-- Menu items go here -->

  </div>
</nav>

main.css

html, body {
    height: 100%;
    font-family: 'Lato';
}

.bordered {
    border-radius: 5px;
    border: 1px solid white;
}

.navbar {
    background-color: #00142e;
}

.red-button {
    border-radius: 5px;
    border: 1px solid #A81E30;
    background-color: #A81E30;
    color: beige;
}

.mainlogo {
    width: 35%;
}

Upon running the code, I encountered some issues:

https://i.sstatic.net/h95eK.png

The main concern is the excessive padding around the navbar. How can I remove this padding and ensure that the navbar's height aligns with the logo and menu links? I tried adding padding: 0px; to the navbar style, but it had no effect.

Furthermore, I would like to center all the content within the navbar (both logo and menu items). Any suggestions on how I can achieve this? Adding d-flex justify-content-center to navbar-collapse did not yield the desired result. Thank you in advance!

Update

I have made changes based on the feedback provided below which resulted in the following layout:

https://i.sstatic.net/BkQTa.png

However, I am still facing issues with centering the navbar content (logo + links) and reducing the unnecessary padding, as the blue bar appears taller than desired. I aim for a more compact design hugging the logo and links closely.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To resolve the centering issue, simply include align-item: center in your unordered list. This should be a child element of your navbar-collapse element, ensuring that all your links are centered vertically.

In terms of padding, it might be more effective to eliminate 

class="img-fluid mainlogo" alt="Responsive image"
and set a preferred height property for your image. When I tried this approach, it seemed to address the centering problem as well.

Please let me know if these suggestions work for you!

edited to incorporate code snippet 

/*old selector for mainlogo*/
.mainlogo {
    width: 35%;
}

/*new selector for mainlogo*/
.mainlogo {
    height: 50px;
}

/*added selector. targets ul elements under "navb" id*/
#navb ul {
  align-items: center;
}

View Navbar after modifications

Answer №2

I took a look at your work on JSFiddle and made some enhancements. You can check out what I did here.
One of the changes I made was wrapping your <nav> within a <header>, and adding the bootstrap class container to ensure that the content is centered depending on the screen size using media queries.
I also switched the content class from container-fluid to container to maintain consistent sizing between the navbar and the rest of the page.
To prevent image distortion when resizing the page, I removed the img-fluid class from your image.

In response to your question in another post, I adjusted the navbar background to match your brand-logo background color. As an added bonus, I included the navbar-dark class so that your burger menu appears when nav items are collapsed, which is a feature introduced in Bootstrap 4.

The .navbar-default class is now .navbar-light, while .navbar-dark remains unchanged. One of these classes is required for each navbar. However, they no longer set background colors but primarily affect text colors.

Additional Enhancement: I replaced the red-button class with btn btn-danger, which provides similar functionality but with hover effects. For your sign-up button, I added the btn btn-success class. This adjustment was made to introduce you to these classes and emphasize the benefit of leveraging existing solutions rather than reinventing the wheel :)

Feel free to utilize the built-in JSFiddle 

Javascript/HTML/CSS snippet CTRL-M
in your Stack Overflow questions/answers. The snippet includes the following CSS code:

html, body {
    height: 100%;
    font-family: 'Lato';
}

.bordered {
    border-radius: 5px;
    border: 1px solid white;
}

header#nav-container{
  background-color: #001a31;
}


#navb ul {
    align-items: center;
}

.mainlogo {
    height: 50px;
}
<!DOCTYPE html>
<html>
  <head>

    <title>Special Nonprofit</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />

    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  </head>
  <body>
  
  <header id="nav-container">
    
    <nav class="navbar navbar-dark navbar-expand-lg container">
      <a class="navbar-brand" href="javascript:void(0)">
        <img src="https://raw.githubusercontent.com/bitbythecron/bootstrap-troubleshooting/main/dummy-logo.png" class="mainlogo" alt="Responsive image">
      </a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navb">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="aboutMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              About
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="fizzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Fizz
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="buzzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Buzz
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="foobarMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Foobar
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="resourcesMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Resources
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="helpMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Help
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-danger" href="javascript:void(0)">WATCH DEMO</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Sign In</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-success" href="javascript:void(0)">Sign Up</a>
          </li>
        </ul>
      </div>
    </nav>
    </header>

    <div class="container">
      <h1>My First Bootstrap Page</h1>
      <p>This is some text.</p>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

Answer №3

Why Not Give This a Try?

 .sidebar { 
            height: 100%; 
            width: 0; 
            position: fixed; 
            /*Remains in place */ 
            background-color: #303630; 
            /*Grey shade*/ 
            overflow-x: hidden; 
      color:white;
      z-index: 12;
            /*Prevents horizontal scrolling */ 
        } 
        /* Styling and positioning for the sidebar links */ 
        
        .sidebar a { 
            padding: 10px 10px 10px; 
            font-size: 25px; 
            color: #ffffff; 
            display: block; 
            transition: 0.3s; 
        } 
        /* Links change color when hovered over */ 
        
        .sidebar a:hover { 
            color: #ffffff; 
        } 
        /* Styling and positioning for the close button */ 
        
        .sidebar .closebtn { 
            position: absolute; 
            top: 0; 
            right: 25px; 
        } 
        /* Sidebar button styling */ 
        
        .openbtn { 
            font-size: 25px; 
            background-color: #000000; 
            color: #ffffff; 
            padding: 10px 10px 10px; 
            border: none;
      position: fixed;
      z-index: 12;
        } 
        /* Button changes color on hover */ 
.openbtn:hover { 
color: #FFFFFF; 
} 

    /* Shifts page content to the right 
    when opening the side navigation */ 
        
        #main { 
            transition: margin-left .5s; 
            /* Add transition effect if desired */ 
            padding: 10px; 
        }
<div id="sidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
×
</a>

<a href="#">Placeholder 1</a>
<a href="#">Placeholder 2</a>
<a href="#">Placeholder 3</a>
<a href="#">Placeholder 4</a>
<a href="#">Placeholder 5</a>
<a href="#">Placeholder 6</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">
Hello
</button>

</div>
<script> 
    /* Sets the width of the sidebar 
    to 250 and the left margin of the 
    page content to 250 */ 
    function openNav() { 
        document.getElementById( 
        "sidebar").style.width = "250px"; 
        document.getElementById( 
        "main").style.marginLeft = "250px"; 
    } 

    /* Set the width of the sidebar 
    to 0 and the left margin of the 
    page content to 0 */ 
    function closeNav() { 
        document.getElementById( 
        "sidebar").style.width = "0"; 
        document.getElementById( 
        "main").style.marginLeft = "0"; 
    } 
</script>

Answer №4

I have centered all the navigation bar content by using the mx-auto class and removed top and bottom padding with the py-0 class, which is equivalent to setting 

padding-top: 0; padding-bottom: 0;
. I also implemented media queries to switch between the main and secondary logos.

If you want to check out the code, here's the link: https://codepen.io/lachiweb/pen/dyXBGvd

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

Achieving an element placement in a navigation bar with flexbox and grid layout | HTML and CSS exclusive techniques

Need help achieving the desired result using only flexbox and grid layout. The goal is to place a search bar vertically centered and to the right of the navbar, while keeping the existing items on the left intact. Can you assist? /* Reset */ * { mar ...

htmlcssflexbox

Innovative Inter-Browser Link with a Distinct Shape

I am currently developing a web application that enables users to input content and then send it out to their phones. Everything is working smoothly, but I am facing an issue with the logo design. The logo in question is displayed as follows: On the left ...

javascriptjqueryhtmlcssimage

Execute a task on Mobile Safari (after a delay)

I'm currently experimenting with HTML5 on Mobile Safari for iOS 6 and I'm curious about executing JavaScript code after a certain amount of time has elapsed. One specific task I am interested in is redirecting to a different page after 60 seconds ...

javascripthtmliosmobile-safaridom-events

The right column in a relatively positioned layout descends as an element in the left column is revealed

Currently in the process of constructing a registration form for our website, everything is going smoothly with one minor hiccup. The form consists of two columns where users enter their information. Initially, when designing elements for the first (left) ...

jqueryhtmlcsspositionmultiple-columns

How can I invoke a function within a directive-generated HTML element's scope?

I created a custom directive that utilizes element.html() to set the HTML content. Within this HTML code, I would like to be able to invoke functions from the scope where the directive is being used. Here's an example: app.directive('myDirective ...

javascripthtmlangularjs

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript

Refresh an AngularJS table built with Bootstrap to display live data in real-time through the use of ng-repeat

Utilizing a bootstrap table with ng-repeat to populate data, yet encountering issues updating and displaying the table. A custom directive has been created for drag and drop functionality in AngularJS. When a file is dragged and dropped, the information i ...

javascriptjsonangularjstwitter-bootstrapngtable

Submitting information from a lone row within a table that is contained within a single form

Within my form, there is a table containing records generated by a for loop iterating through items in a list. Each record has a submit button that triggers an AJAX call to serialize and POST the form data to the controller. The goal is to only POST data f ...

htmlajaxasp.net-mvc

Issue with text decoration in Html, Css, and Bootstrap

this image shows the issue Hi there, I'm facing an issue with my project involving bootstrap. Whenever I include bootstrap in my project using a link, all "a" tags end up with text decoration. How can I fix this problem? ...

htmlcssbootstrap-5

Stop the page from scrolling

I'm trying to find a way to disable page scrolling, so I used this style for the body: overflow: hidden; Surprisingly, it worked perfectly on desktop but had no effect on mobile devices. After checking out this resource, it seems that creating a ch ...

htmlcss

What is causing columns.render not to trigger when DataTable().draw() is invoked?

I'm wondering why the columns.render method is not part of the execution flow when using DataTable().draw(). For instance: HTML <table id="data"> <thead> <tr> <th>TimeColumn</th> < ...

jqueryhtmldatatables

The grid is intended to be positioned horizontally, but is currently being shown vertically

I need help fixing the layout of my items. They are currently displaying vertically instead of in a horizontal row. Any suggestions on how to correct this? https://i.stack.imgur.com/CQ4yG.jpg <div class="col-lg-12 col-sm-12 portfolio-item"> <d ...

htmlcssbootstrap-4

vertical alignment, almost there

Is there a way to align a block of text so that the top of the first line is positioned 50% down from the top of the td element? Imagine this scenario, where the top of the first row is exactly at the 50% mark. -------------- | | | ...

htmlcss

Tips for designing a multi-level dropdown navbar

I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be ...

javascripthtmlvue.jsvuejs3bootstrap-5

Master the art of keeping track in just a single line

I need to ensure these tabs stay in a single line and remain responsive for mobile devices. Below is the code snippet: <div class="navbar"> <div class="navbar-inner"> <ul class="nav nav-tabs"> <li class="active"& ...

htmltwitter-bootstrap

background with alternating stripes to decorate the border of a div

Is it possible to give a striped effect to a div element's border using jQuery? Consider the following code snippet: <style type="text/css"> #panel { padding: 50px text-align: center; background-color: #e5eecc; bord ...

jqueryhtmlcss

Unable to define a range for the hr element using the nth-of-type selector

Why isn't the hr element from the 1st to the 3rd hour red as specified in the CSS code below? hr:nth-of-type(n+1):nth-of-type(-n+3){ background:red; } <!DOCTYPE html> <html> <head> </head> <body> <hr /> <p>T ...

htmlcss

The particles.js with absolute positioning is currently overlapping my div with relative positioning

Visit this link <div class="outer-container"> <div id="particles-js"> <div class="your-content"> <article id="3" class="bg-dusk transition md:group-hover:opacity-50 md:hover:opacity-important md:hov ...

htmlcssvue.js

Streaming RTMP video through a WebView

Currently, I am working on implementing rtmp streaming using WebView. To achieve this, I referred to the code provided on Stack Overflow under this link The easiest way to play an audio RTMP stream in Android, which was shared by a user named Club. After a ...

javascriptandroidhtml

In JavaScript/jQuery, there is a technique for retrieving the values of dynamically generated td attributes and the id tags of elements inside them within tr

I am currently working on creating a calendar of events using PHP, jQuery, and ajax. The calendar is embedded within an HTML table, where the rows and fields are dynamically generated based on the number of days in a specific month. In order to successfull ...

javascriptphpjqueryhtmlajax