Issue with Navbar Menu Button Alignment not Vertical Centered

My goal is to have the navigation menu bar centered in my navbar, and it looks great on every screen size except for medium. In medium-sized screens, the menu shifts to the bottom right and I've tried various solutions like adjusting margins, padding, and flex alignments, but nothing seems to work. Can someone please help me figure this out?

'''
<!--HTML-->
            <nav id='header-nav' class='navbar navbar-expand-lg navbar-dark bg-dark'>
                <div class='container-fluid mx-auto'>
                    <div class='navbar-brand'>
                        <a href="index.html">
                            <div class='d-none d-md-block' id='logo' alt='piano logo'></div>
                        </a>
                            <h1><a href='index.html' id='header1' class='d-flex text-light'>Sandra's Studio</a></h1>
                                <h2 id='header2' class='d-flex text-info'>Cumming, GA</h2>
                            </div>
                                    <!--Menu Button-->
                                    <button id='menuButton' class="d-flex ml-auto d-block d-lg-none navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>
                                    <div class='collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>
                                        <ul id='nav nav-tabs' class='navbar-nav'>
                                            <!--Home Button-->
                                            <li class='nav-item d-block d-lg-none text-center text-lg-right'>
                                                <a class='nav-link active' id='home' href='index.html'>home</a>
                                            </li>
                                            <!--New Students Button-->
                                            <li class='nav-item text-center text-lg-right'>
                                                <a class='nav-link' id='lessons' href='html/new-students.html'>looking for lessons</a>
                                            </li>
                                            <!--Previous Students Button-->
                                            <li class='nav-item text-center text-lg-right'>
                                                <a class='nav-link' id='existing' href='html/existing-students.html'>already a student</a>
                                            </li>
                                            <!--Info Dropdown-->
                                            <li class='nav-item dropdown'>
                                                <a class="nav-link dropdown-toggle text-center text-lg-right" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Info</a>
                                                <div class='dropdown-menu bg-info'>
                                                    <a class='dropdown-item text-center' href='#testimonials'>testimonials</a>
                                                    <a class='dropdown-item text-center' href='#schedule'>schedule</a>
                                                    <a class='dropdown-item text-center' href='#address'>address</a>
                                                </div>
                                            </ul>
                                        </div>
                                </div>
                            </div>
                        </nav>
                    </header>
'''


    '''
       * {
    box-sizing: border-box;
    text-decoration: none;
}
body {
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
}

/*Navbar*/
#header-nav {
    width: 100%;
}

div.navbar-header {
    padding-bottom: 0;
}

#logo {
    background: url('../images/piano.png') no-repeat;
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 20px 0 0;
}

.navbar-brand {
    margin: 0;
    padding-top: 15px;
    height: auto;
    width: auto;
    text-align: center;
}
.navbar-brand #header1 {
    text-transform: uppercase;
    font-family: bebas-neue, sans-serif;
    text-shadow: 1px 1px 1px #222;
    line-height: .75;
    margin: 0;
    padding: 0;
}
.navbar-brand #header2 {
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

 a:hover,.navbar-brand a:focus {
    color: #FDECEF;
    text-decoration: none;
}

#header1 {
    color: #FDECEF;
}

/*Menu Buttons*/
.navbar-toggler-icon {
    color: #FFF;
}

#nav-list {
    margin-top: 10px;
}

#nav-list a {
    color: #F2F3F4;
    text-align: center;
}

.nav-link {
    text-transform: uppercase;
}

.dropdown-menu {
    text-transform: uppercase;
    border-radius: 8px;
}

/*Responsive Framework*/

/*Extra Large Devices*/
@media (min-width: 1200px) {

    .navbar-brand #header1 {
        font-size: 2em;
    }

    .navbar-brand #header2 {
        font-size: 1.5em;
    }

    #navbarSupportedContent {
        margin-right: 75px;
    }
}

/*Large Devices*/
@media (min-width: 992px) and (max-width: 1199.98px) {

    #logo {
        background: url('../images/piano-medium.png') no-repeat;
        width: 150px;
        height: 150px;
    }

    .navbar-brand #header1 {
        font-size: 1.75em;
    }

    .navbar-brand #header2 {
        font-size: 1.25em;
    }

    #navbarSupportedContent {
        margin-right: 75px;
    }
}

/*Medium Devices*/
@media (min-width: 768px) and (max-width: 991.98px) {

    #logo {
        background: url('../images/piano-medium.png') no-repeat;
        width: 150px;
        height: 150px;
    }

    .navbar-brand {
        width: 100%;
    }

    .navbar-brand #header1 {
        margin: 0 0 0 10px;
        font-size: 1.5em;
    }

    .navbar-brand #header2 {
        margin: 10px 0 0 10px;
        font-size: 1em;
    }

    .nav-item {
        font-size: 2em;
    }

    .dropdown-item {
        font-size: 1.5em;
    }
}

/*Small Devices*/
@media (min-width: 576px) and (max-width: 767.98px) {

    .navbar-brand #header1 {
        margin: 0;
        font-size: 1.5em;
    }

    .navbar-brand #header2 {
        margin: 10px 0 0 10px;
        font-size: 1em;
    }
}

/*Extra Small Devices*/
@media (max-width: 575.98px) {

    .navbar-brand #header1 {
        margin: 0;
        font-size: 10vw;
    }

    .navbar-brand #header2 {
        margin: 10px 0 0 10px;
        font-size: 3.5vw;
    }
}

/*Extremely Small Devices*/
@media (max-width: 400px) {
    .navbar-brand #header1 {
        font-size: 8vw;
    }

    .navbar-brand a {
        font-size: 5vw;
    }
}
'''
htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

Your burger menu is shifting from vertically-aligned in the center on the right side to vertically-aligned at the bottom on the right side when you adjust screen sizes while staying in the mobile view;

The following code snippet can help you achieve a consistent experience in the medium size:

@media (max-width: 991.98px) and (min-width: 768px){
.navbar-brand {
    max-height: 99px;
    width: 100%;
}
}

Here is the complete working example below:

* {
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
}


/*Navbar*/

#header-nav {
  width: 100%;
}

div.navbar-header {
  padding-bottom: 0;
}

#logo {
  background: url('../images/piano.png') no-repeat;
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px 0 0;
}

.navbar-brand {
  margin: 0;
  padding-top: 15px;
  height: auto;
  width: auto;
  text-align: center;
}

.navbar-brand #header1 {
  text-transform: uppercase;
  font-family: bebas-neue, sans-serif;
  text-shadow: 1px 1px 1px #222;
  line-height: .75;
  margin: 0;
  padding: 0;
}

.navbar-brand #header2 {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  font-weight: 600;
}

a:hover,
.navbar-brand a:focus {
  color: #FDECEF;
  text-decoration: none;
}

#header1 {
  color: #FDECEF;
}


/*Menu Buttons*/

.navbar-toggler-icon {
  color: #FFF;
}

#nav-list {
  margin-top: 10px;
}

#nav-list a {
  color: #F2F3F4;
  text-align: center;
}

.nav-link {
  text-transform: uppercase;
}

.dropdown-menu {
  text-transform: uppercase;
  border-radius: 8px;
}


/*Responsive Framework*/


/*Extra Large Devices*/

@media (min-width: 1200px) {
  .navbar-brand #header1 {
    font-size: 2em;
  }
  .navbar-brand #header2 {
    font-size: 1.5em;
  }
  #navbarSupportedContent {
    margin-right: 75px;
  }
}


/*Large Devices*/

@media (min-width: 992px) and (max-width: 1199.98px) {
  #logo {
    background: url('../images/piano-medium.png') no-repeat;
    width: 150px;
    height: 150px;
  }
  .navbar-brand #header1 {
    font-size: 1.75em;
  }
  .navbar-brand #header2 {
    font-size: 1.25em;
  }
  #SupportedContent {
    margin-right: 75px;
  }
}


/*Medium Devices*/

@media (min-width: 768px) and (max-width: 991.98px) {
  #logo {
    background: url('../images/piano-medium.png') no-repeat;
    width: 150px;
    height: 150px;
  }
  .navbar-brand {
    max-height: 99px;
    width: auto;
  }
  .navbar-brand #header1 {
    margin: 0 0 0 10px;
    font-size: 1.5em;
  }
  .navbar-brand #header2 {
    margin: 10px 0 0 10px;
    font-size: 1em;
  }
  .nav-item {
    font-size: 2em;
  }
  .dropdown-item {
    font-size: 1.5em;
  }
}


/*Small Devices*/

@media (min-width: 576px) and (max-width: 767.98px) {
  .navbar-brand #header1 {
    margin: 0;
    font-size: 1.5em;
  }
  .navbar-brand #header2 {
    margin: 10px 0 0 10px;
    font-size: 1em;
  }
}


/*Extra Small Devices*/

@media (max-width: 575.98px) {
  .navbar-brand #header1 {
    margin: 0;
    font-size: 10vw;
  }
  .navbar-brand #header2 {
    margin: 10px 0 0 10px;
    font-size: 3.5vw;
  }
}


/*Extremely Small Devices*/

@media (max-width: 400px) {
  .navbar-brand #header1 {
    font-size: 8vw;
  }
  .navbar-brand a {
    font-size: 5vw;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<nav id='header-nav' class='navbar navbar-expand-lg navbar-dark bg-dark'>
  <div class='container-fluid mx-auto'>
    <div class='navbar-brand'>
      <a href="index.html">
        <div class='d-none d-md-block' id='logo' alt='piano logo'></div>
      </a>
      <h1><a href='index.html' id='header1' class='d-flex text-light'>Sandra's Studio</a></h1>
      <h2 id='header2' class='d-flex text-info'>Cumming, GA</h2>
    </div>
    <!--Menu Button-->
    <button id='menuButton' class="d-flex ml-auto d-block d-lg-none navbar-toggler" type="button" data-toggle="collapse" data-target="#SupportedContent" aria-controls="SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>
    <div class='collapse navbar-collapse justify-content-end' id='SupportedContent'>
      <ul id='nav nav-tabs' class='navbar-nav'>
        <!--Home Button-->
        <li class='nav-item d-block d-lg-none text-center text-lg-right'>
          <a class='nav-link active' id='home' href='index.html'>home</a>
        </li>
        <!--New Students Button-->
        <li class='nav-item text-center text-lg-right'>
          <a class='nav-link' id='lessons' href='html/new-students.html'>looking for lessons</a>
        </li>
        <!--Previous Students Button-->
        <li class='nav-item text-center text-lg-right'>
          <a class='nav-link' id='existing' href='html/existing-students.html'>already a student</a>
        </li>
        <!--Info Dropdown-->
        <li class='nav-item dropdown'>
          <a class="nav-link dropdown-toggle text-center text-lg-right" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Info</a>
          <div class='dropdown-menu bg-info'>
            <a class='dropdown-item text-center' href='#testimonials'>testimonials</a>
            <a class='dropdown-item text-center' href='#schedule'>schedule</a>
            <a class='dropdown-item text-center' href='#address'>address</a>
          </div>
      </ul>
    </div>
  </div>
  </div>
</nav>

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 CSS code for creating a typing effect is not functioning properly

I'm having some trouble with a code snippet I wrote to create a typing effect on hover within a div. Here's the code: .about-panel:hover p { color: white; font-size: 1em; white-space: wrap; overflow: hidden; -webkit-animat ...

htmlcssweb

What is the best way to split a Bootstrap row into five equal-sized columns?

Trying to divide a Bootstrap row into five columns can be tricky when you only have 12 units available on the device. How can this division be achieved successfully? ...

htmlcssbootstrap-4

Updating the value of a localStorage key after each successful AJAX call in JavaScript

I'm currently facing a challenge with my local storage key value. The issue is that it doesn't update the value when the AJAX call successfully returns data. It only retains the old stored data, requiring me to manually refresh the page by pressi ...

javascriptjqueryajaxhtml

Using Selenium with C# to input text into an HTML <input> tag is not functioning properly

I need help figuring out how to fill in an input field on a website using HTML. Here is what the section of the website () looks like: <div class="flex-item-fluid"> <input autocomplete="username" autocapitalize="off" ...

c#htmlseleniumautomation

Implement a feature in JSP that allows users to dynamically add or remove fields before submitting the data to the database

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- ...

javascriptjqueryhtmlajaxjsp

A guide on extracting data from a customized HTML table on the client side and sending it to the Flask backend

I am looking to implement a feature where users can add as many rows as they want and input information into them. Once the user has finished adding the desired data, I need to process it using Flask on the server-side. Can someone please provide guidanc ...

javascripthtmlajaxflaskbackend

Incorporating a mat-expansion-panel component into a mat-accordian

I'm trying to integrate a mat-expansion-component into a mat-accordion, but I'm facing styling issues. <mat-accordion> <app-panel1></app-panel1> <app-panel2></app-panel2> </mat-accordion> The app-panel ...

htmlangulartypescriptangular-materialangular-material2

Aligning a row with space between columns

I am looking to display 6 divs on my website with a margin between them for aesthetics. In order to maintain the design when resizing the site, I had to specify widths for the columns. However, I am struggling to center all the cols effectively, despite tr ...

jqueryhtmlcsstwitter-bootstrapwrapper

Creating an unordered list (ul) with list items (li) that extend the full width

Having trouble making my list items (li) from the unordered list (ul) stretch across the page like the navigation bars on websites such as Verragio and James Allen. Can someone assist me with this? Here is a basic example of a nav hover bar. .dropdown-b ...

htmlcss

Learn how to showcase JSON file contents in HTML using AngularJS

When attempting to display a collection of questions stored in JSON data within an HTML file, I incorporated the ng-repeat directive to loop through the data using ng-repeat="q in response", and then attempted to print them individually like this: {{q.q1} ...

javascriptjqueryhtmlangularjsjson

Desktop displays do not show images, only mobile devices

My website displays multiple retailer images as affiliate links. I am facing an issue where the images are not visible on desktop for some users, even though I can see them on my end. I have tried clearing cache, cookies, and using different browsers, but ...

htmlcsspermalinks

JavaScript: Automatically retrieving the if else function

I need help automating the calculation of the number of days a person worked based on their "in-time" and "out-time". I've tried to implement this in my JS code, but it's not working as expected. HTML <fieldset> In-Time: <input clas ...

javascriptphphtml

The div element is not resizing properly when the phone is in landscape mode

I have set a background photo to take up 100% of the height. However, when I view the site on a mobile phone in landscape mode using Chrome or Firefox, the background image does not fill the entire space. In desktop and portrait mobile modes, everything ...

htmlcssresponsive-design

Leverage the power of Web Components in Vue applications

Currently, I am attempting to reuse Web Components within a Vue Component. These Web Components utilize the template element for formatting output. However, when I insert them into the Vue Template, they are either removed from the DOM or compiled by Vue. ...

javascripthtmlvue.js

HTML Option Absent from Blend VS2013

After recently installing VS2013 Pro in Office, I was excited to use Blend and its HTML Option. However, I am struggling to find a way to start an application with html as shown in videos. My goal was to utilize Blend for creating prototypes using html. D ...

javascripthtmlvisual-studio-2013blend

CSS Layout - Float: What's floating to the top?

Are there any CSS techniques available to make floated blocks fill in both upwards and in their float direction? For example - https://i.sstatic.net/uo06B.png Instead of - https://i.sstatic.net/oEijA.png I know this can be achieved using JavaScript li ...

csslayoutcss-float

Inspect the data attribute and modify the class

I am looking to determine if a data attribute has a specific value and then update the class associated with it. For example, in my HTML code: <li class="country active" data-country-code="ca"><div class="flag ca"& ...

javascriptjqueryhtml

Tips for showcasing content by hovering over buttons with the help of Bootstrap3 and Jquery

My code and fiddle are currently set up to display buttons when hovered over, but I want to modify it so that only the relevant button is displayed when a specific text is hovered over. For example, if "Water" is hovered over, only the button for Water sho ...

javascripthtmljquerycss

What is the technique for determining the scale percentage of an image with the background-size property set to cover?

I am trying to determine the scale of an image after it has been resized. By using background-size: cover on the body background image, I want to ensure that the image maintains its aspect ratio and expands or shrinks to fit both the width and height of t ...

cssbackground

What is the best way to extract the HTML input id using observeEvent in shiny?

How can I capture the HTML input id using observeEvent in shiny? shinyApp( ui = basicPage( HTML('<input type="button" name = "b1" value="Travel time"/>')), server = function(input, output, session) { o ...

htmlrshiny