How to make my buttons fit my navbar size

bootstrap navbar
bootstrap 4 navbar height
padding css
responsive navbar
resizing menu bar css
bootstrap navbar equal spacing
full width navigation bar
css navbar

I'm new to the web design world, so I was playing a bit with bootstrap's and w3 help and I encountered the following issue. I've got this right now: what I have

and I want to make the two buttons on the right to fit the whole navigation bar height, is there a way to do that? something like a match_parent in android. Here's my code:

li {
    display: inline;
    float: left;
}
li a {
    width: 80px;
    height: match-parent;
    background-color: rgb(49, 48, 48);
    font-family: Arial;
    color: white;
    font-weight: 700;
    font-size: 24px;
    padding: 24px;    
    text-decoration: none;
    padding-bottom: 8px;
    padding-top: 8px;
    text-align: center;
    display: inline-block;
    border-left: 1px solid black;
    border-right: 1px solid black;
    transition: all 0.3s ease 0s;
}
li a:hover {
    background: #1075e9;
    /*border-radius: 50px;*/
    border-color: #1075e9;
    transition: all .4s ease 0s;
}
li a:active{
    background-color: #07274d;
    border-color: #07274d;
    transition: 0s;
}

.right-li{
    float: right !important;
}
.navbar {
    list-style: none;
    background: rgb(49, 48, 48);
    height: 115.8px;
}
#banner-img{
    /*border: 1px solid black;*/
    border-radius: 30px;
    width: 80px;
    height: 105.8px;
    padding: 4px; 
}
#banner-img:hover{
    background: rgb(168, 168, 168);
    transition: all .4s ease 0s;
}
#banner-img:active{
    background-color: rgb(24, 24, 24);
    border-color: white;
    transition: 0s;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
        <meta charset="utf-8">
        <title>Test page</title>
        <script src="script.js"></script>
    </head>


    
    <header>
        <!--Main Navigation-->
        <div class="navbar-container">
            <ul class="navbar">
                <li>
                    <img src="logo.png" id="banner-img" href="#home">
                </li>
                <li class="right-li">
                    <a href="#me">Me</a>
                </li>
                <li class="right-li">
                    <a href="#about">About</a>
                </li>
            </ul>
        </div>      
    </header>

    <body>    
        <!-- page content -->
    </body>
</html>

This is your solution

        li {
            display: inline;
            float: left;
            height: 100%;

        }
        li a {
            line-height:110px; /* line height should be the same as the element's height*/
                    width: 80px;
                    height: 100%;
                    background-color: rgb(49, 48, 48);
                    font-family: Arial;
                    color: white;
                    font-weight: 700;
                    font-size: 24px;
                    padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/   
                    text-decoration: none;
                    text-align: center;
                    display: inline-block;
                    border-left: 1px solid black;
                    border-right: 1px solid black;
                    transition: all 0.3s ease 0s;
        }
        li a:hover {
            background: #1075e9;
            /*border-radius: 50px;*/
            border-color: #1075e9;
            transition: all .4s ease 0s;
        }
        li a:active{
            background-color: #07274d;
            border-color: #07274d;
            transition: 0s;
        }

        .right-li{
            float: right !important;
        }
        .navbar {
            list-style: none;
            background: rgb(49, 48, 48);
            height: 115.8px;
        }
        #banner-img{
            /*border: 1px solid black;*/
            border-radius: 30px;
            width: 80px;
            height: 105.8px;
            padding: 4px; 
        }
        #banner-img:hover{
            background: rgb(168, 168, 168);
            transition: all .4s ease 0s;
        }
        #banner-img:active{
            background-color: rgb(24, 24, 24);
            border-color: white;
            transition: 0s;
        }
      <!DOCTYPE html>
      <html lang="en">
          <head>
              <link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
              <meta charset="utf-8">
              <title>Test page</title>
              <script src="script.js"></script>
          </head>



          <header>
              <!--Main Navigation-->
              <div class="navbar-container">
                  <ul class="navbar">
                      <li>
                          <img src="logo.png" id="banner-img" href="#home">
                      </li>
                      <li class="right-li">
                          <a href="#me">Me</a>
                      </li>
                      <li class="right-li">
                          <a href="#about">About</a>
                      </li>
                  </ul>
              </div>      
          </header>

          <body>    
              <!-- page content -->
          </body>
      </html>

How To Create Equal Width Menu Links, Use Height for li as 100% and remove the top and bottom padding from a. Use line height to vertically align the text. li { display: inline; height:100%;/* made the  You only need to set it in one place in an external CSS after you call the bootstrap CSS. Just add this to your custom.css file.navbar{height: 200px; /* Just an example height*/


Use Height for li as 100% and remove the top and bottom padding from a. Use line height to vertically align the text.

li {
        display: inline;
        height:100%;/* made the height to be the same as the parent's height */
        float: left;
        }

li a {
            line-height:110px; /* line height should be the same as the element's height*/
            width: 80px;
            height: 100%;
            background-color: rgb(49, 48, 48);
            font-family: Arial;
            color: white;
            font-weight: 700;
            font-size: 24px;
            padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/   
            text-decoration: none;
            text-align: center;
            display: inline-block;
            border-left: 1px solid black;
            border-right: 1px solid black;
            transition: all 0.3s ease 0s;
        }  

EDIT. Oh and if you use Chrome, Firefox , they have developer tools which you can use to see what elements to edit.

How To Create Full Width Buttons, Style the navigation menu */ .navbar { width: 100%; background-color: #555; overflow: auto; } /* Navigation links */ .navbar a { float: left; padding: 12px; You have to define height or min-height for few elements: .navbar, .navbar-brand; Change margin-top for the .navbar-toggle button that appears in the collapsed navbar. This needs to be calculated but it should be easy to do. A formula is in the code. Change padding-top and padding-bottom and define line-height for uncollapsed navbar links.


You can use display: flex; and flex-grow: 1; to get the contents to the right. Much cleaner than using floats.

.navbar {
  list-style: none;
  background: rgb(49, 48, 48);
  height: 115.8px;
  display: flex;
}

.logo {
  flex-grow: 1;
}

li a {
  width: 80px;
  height: match-parent;
  background-color: rgb(49, 48, 48);
  font-family: Arial;
  color: white;
  font-weight: 700;
  font-size: 24px;
  padding: 24px;
  text-decoration: none;
  padding-bottom: 8px;
  padding-top: 8px;
  text-align: center;
  display: inline-block;
  border-left: 1px solid black;
  border-right: 1px solid black;
  transition: all 0.3s ease 0s;
}

#banner-img {
  /*border: 1px solid black;*/
  border-radius: 30px;
  width: 80px;
  height: 105.8px;
  padding: 4px;
}

#banner-img:hover {
  background: rgb(168, 168, 168);
  transition: all .4s ease 0s;
}

#banner-img:active {
  background-color: rgb(24, 24, 24);
  border-color: white;
  transition: 0s;
}
<header>
  <!--Main Navigation-->
  <div class="navbar-container">
    <ul class="navbar">
      <li class="logo">
        <img src="logo.png" id="banner-img" href="#home">
      </li>
      <li class="right-li">
        <a href="#me">Me</a>
      </li>
      <li class="right-li">
        <a href="#about">About</a>
      </li>
    </ul>
  </div>
</header>

How do I modify navbar height? - HTML & CSS, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  This navigation code should be placed outside of your centered content container to allow us to stretch it the full width of the browser window in our CSS. All in all, I think this is an acceptable amount of code for a navigation bar. The CSS. Again, all I did here was take the previous navigation bar CSS and modify it a bit. The results are below:


change the navbar height

.navbar {
    list-style: none;
    background: rgb(49, 48, 48);
    height: 115.8px;
}

or if you want to keep the navbar same size and

.right-li {
    float: right !important;
    height: 104px;
}

Button group · Bootstrap, Also, I need to resize my logo, but I'm not sure of the best way to do it? HTML: <​div class="navbar-header"> <button type="button" class="navbar-toggle" My image is too large, I need it to be smaller to fit inside the nav bar. If you're simply trying to adjust the size of an image to correspond to the height of a default navbar (min-height: 50px), simply use the below CSS as a base depending on how you want the image to fit.


Add line height for anchor elements

li {
    display: inline;
    float: left;
    height: 100%;
}
li a {
    width: 80px;
    line-height: 4.2;
    background-color: rgb(49, 48, 48);
    font-family: Arial;
    color: white;
    font-weight: 700;
    font-size: 24px;
    padding: 24px;    
    text-decoration: none;
    padding-bottom: 8px;
    padding-top: 8px;
    text-align: center;
    display: inline-block;
    border-left: 1px solid black;
    border-right: 1px solid black;
    transition: all 0.3s ease 0s;
}
li a:hover {
    background: #1075e9;
    /*border-radius: 50px;*/
    border-color: #1075e9;
    transition: all .4s ease 0s;
}
li a:active{
    background-color: #07274d;
    border-color: #07274d;
    transition: 0s;
}

.right-li{
    float: right !important;
}
.navbar {
    list-style: none;
    background: rgb(49, 48, 48);
    height: 115.8px;
}
#banner-img{
    /*border: 1px solid black;*/
    border-radius: 30px;
    width: 80px;
    height: 105.8px;
    padding: 4px; 
}
#banner-img:hover{
    background: rgb(168, 168, 168);
    transition: all .4s ease 0s;
}
#banner-img:active{
    background-color: rgb(24, 24, 24);
    border-color: white;
    transition: 0s;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
        <meta charset="utf-8">
        <title>Test page</title>
        <script src="script.js"></script>
    </head>


    
    <header>
        <!--Main Navigation-->
        <div class="navbar-container">
            <ul class="navbar">
                <li>
                    <img src="logo.png" id="banner-img" href="#home">
                </li>
                <li class="right-li">
                    <a href="#me">Me</a>
                </li>
                <li class="right-li">
                    <a href="#about">About</a>
                </li>
            </ul>
        </div>      
    </header>

    <body>    
        <!-- page content -->
    </body>
</html>

How should I fix the button size in the nav bar in bootstrap?, Group a series of buttons together on a single line with the button group, and Modal · Navs · Navbar · Pagination · Popovers · Progress · Scrollspy · Tooltips For button groups, this would be role="group" , while toolbars should have a role​="toolbar" . Feel free to mix input groups with button groups in your toolbars. Buttons Alert Buttons Outline Buttons Split Buttons Animated Buttons Fading Buttons Button on Image Social Media Buttons Read More Read Less Loading Buttons Download Buttons Pill Buttons Notification Button Icon Buttons Next/prev Buttons More Button in Nav Block Buttons Text Buttons Round Buttons Scroll To Top Button Forms


How to add buttons of sizes other than medium in navbar (and keep , The quick answer is to use the Bootstrap button class .navbar-btn (and the for buttons and other form elements in a form in your navigation bar): Components · Bootstrap . Most horizontal alignment in CSS and Bootstrap is very easy. As you can see, with CSS alignment, there is no one method fits all. A navigation bar does not need list markers Set margin: 0; and padding: 0; to remove browser default settings The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next chapters.


How To Create Full Width Buttons, My wish for being able to use a larger logo and have a vertically centered nav inside the same navbar does not seem covered by this. Should I  How to Create a Resizing Menu Bar By Antonio Pratas | Mar. 12, 2013 Lately some websites, like This is the Brigade and All You , have started featuring a dynamic and animated menu that resizes on scroll down.


HTC U12+ - Navigation Bar, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML. Collapsing The Navigation Bar. The navigation bar often takes up too much space on a small screen. We should hide the navigation bar; and only show it when it is needed. In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed: