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:

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:

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

The most sophisticated method for creating a 2x2 grid of divs

I have developed a quiz application similar to Buzzfeed with four answer options for each question. The layout on mobile devices is satisfactory, displayed in a 2x2 grid. However, when viewing the app on desktop screens, the answers appear horizontally in ...

htmlcssangularjs

Issue with automatic compiling in Sublime 2 for less2css

Whenever I try to save my style.less file, the automatic compilation doesn't happen. Is there a mistake in how I've set it up? Here's what is currently in my ox.sublime-project file: { "folders": [ { ...

csscompilationlesssublimetext2

'Dynamic' styling in Next.js using conditional CSS

I am exploring ways to style elements based on their parameters. I have been searching for terms like "conditional css react" and "implementing conditional styles in react with css". Here is a snippet of my code: e.g. <div class="ChatComponent_ ...

cssreactjsnext.js

Assistance with Ajax for content loading

Greetings, I am encountering an issue with the following code snippet (located in a js file named ajax.js) $(function(){ $("#loading").hide(); $("ul#nav a").click(function(){ page = "content/"+$(this).attr('href') ...

javascriptphpjqueryhtmlajax

What is the process for gathering information using selenium from a webpage?

Attempting to retrieve data using Selenium and Python from a website. Below is the code that has been used so far: url = 'https://www.kicker.de/1894559/spieldaten/bayern-muenchen-14/borussia-mgladbach-15' chrome = webdriver.Chrome() select = Sel ...

pythonhtmlselenium

Getting the dimensions of an image when clicking on a link

Trying to retrieve width and height of an image from this link. <a id="CloudThumb_id_1" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'http://www.example.com/598441_l2.jpg'" onclick="return theFunction();" href="http ...

javascripthtml

New HTML output is displaying strangely when using jQuery AJAX

My jQuery AJAX function retrieves new HTML content from a PHP script. The PHP script is functioning correctly and sending back the accurate HTML to jQuery. However, when I utilize the html() function, the displayed HTML is incorrect. To verify the returned ...

jqueryhtmlajax

Styling Based on Conditions in Angular

Exploring the unique function of conditional formatting in Microsoft Excel, where color bars are utilized to represent percentages in comparison to the highest value. Is there a way to replicate this functionality using HTML5 with CSS or JavaScript? Perha ...

javascriptcsshtmlangularhtml-table

Connect and interact with others through the Share Dialogues feature in the

Update - Edit I'm just starting to explore the concept of share dialogues and I want to integrate it into my website. On my site, there is a reaction timer game that shows the user's reaction time in seconds in a modal popup. I want users to be ...

javascripthtmljqueryfacebookshare

Implementing icon display upon click in a Meteor application

Currently, I am in the process of developing an application using meteor and within one of the templates, I have the following code snippet. <h3> <b> <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a> </b> ...

javascriptjqueryhtmlcssmeteor

What are the style attributes that can be edited in each ant design component?

My goal is to customize an ant design card by adding a border only on the left and right sides of the card. The bordered attribute in the card component seems to either remove the entire border or display it on all sides. I am looking for a way to specif ...

cssreactjsweb-componentantd

Strange glitch in the Trebuchet MS font

I am currently attempting to utilize the jquery.fullcalendar plugin with jQuery UI theming. Everything seems to be functioning properly, except for an issue where the user's selection of a time range (week or day view) is displaced by approximately on ...

jquerycssjquery-uijquery-pluginsfullcalendar

When attempting to retrieve a value from a dropdown menu in HTML using PHP, an undefined index error occurs

Having trouble extracting a value from a select tag in HTML using PHP, as it keeps reporting an undefined index error. Here's my HTML form: <form method="POST" action="proceso.php"> <label for="language">Language</label> <se ...

phphtmlselect

Is it possible to modify the inactive color of just one radio button in Framework7?

Is there a way to change the inactive color of only one radio button in Framework7? I am aware that using the CSS variable --f7-radio-inactive-color allows me to set the inactive color for all radio buttons. However, I specifically want to modify the inac ...

javascriptjqueryhtmlcsshtml-framework-7

Guide to designing a dropdown navigation menu in GWT

Hey, I'm currently working on setting up a drop down menu using GWT and here's the layout I have in mind: | Categories | Pictures | Other | When the categories dropdown opens, my goal is to display the categories grouped in pairs. For example: ...

javacssgwt

Identifying a Resizable Div that Preserves its Aspect Ratio During Resizing

Below is the HTML code snippet I'm working with: <div id="myid_templates_editor_text_1" class="myid_templates_editor_element myid_templates_editor_text ui-resizable ui-draggable" style="width: 126.79999999999998px; height: 110px; position: absolut ...

javascriptjqueryhtmlcssjquery-ui

Assistance with Validating Forms Using jQuery

I have a form located at the following URL: . For some reason, the form is not functioning properly and I am unsure of the cause. Any suggestions or insights on how to fix it? ...

javascriptjqueryhtmlcssjquery-validate

Positioning a text field and a button adjacent to each other within the same row

My challenge is to consistently position a textfield and a button side by side. The requirement is for the button to always be on the right side of the screen, while the textfield should take up the remaining width on the left side. I initially tried setti ...

htmlcssjquery-mobile

I need help figuring out how to showcase the following object in an Angular 5 HTML file

The console screenshot above shows an object with two values: users and tickers, each being an array of values. How can I display these values in an Angular 5 HTML template similar to the screenshot above? I attempted to use ngFor but encountered errors. ...

javascripthtmlnode.jsangularangular5

Adjust text size based on device orientation changes

I'm struggling to dynamically change the font size based on screen orientation and width. How can I adjust the font size when switching between landscape and portrait mode? I attempted using an event listener, but it's not updating the font size. ...

htmlangularsassionic2