Buttons lining up


Joined
Feb 6, 2022
Messages
1
Reaction score
0
I am having trouble lining up my button with my h1 element it just floats below out of position and when i squeeze the page it turns into a drop down menu and it sort of just floats below the h1. Im using bootstrap 5 if htat helps.

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>David Chu's China Bistro</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="https://kit.fontawesome.com/aaf485eeb7.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:[email protected];400;700&display=swap" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <nav id="header-nav" class="navbar navbar-expand-md navbar-light">
            <div class="container">
                <div class="navbar-header">
                    <a href="index.html" class="float-start d-none d-md-block d-lg-block d-xl-block">
                        <div id="logo-img"></div>
                </a>       
                

                <div class="navbar-brand">
                    <a href="index.html">
                        <h1>David Chu's China Bistro</h1>
                    </a>
                    <p>
                        <img src="images/star-k-logo.png" alt="Kosher certification">
                        <span>Kosher Certified</span>
                    </p>
                </div>
                
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
              </div>

              <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="nav navbar-nav navbar-right" id="nav-list">
                      <li>
                          <a class="nav-link" aria-current="page" href="menu-categories.html">
                            <span class="fas fa-utensils"></span>
                            <br class="d-md-block"> Menu</a>
                      </li>
                      <li>
                          <a class="nav-link" href="#">
                              <span class="fas fa-info-circle"></span>
                              <br class="d-md-block"> About</a>
                      </li>
                      <li>
                          <a class="nav-link" href="#">
                              <span class="fas fa-certificate"></span>
                              <br class="d-md-block"> Awards</a>
                      </li>
                      <li id="phone" class="d-sm-none d-md-block">
                          <a class="nav-link active" aria-current="page" href="tel:410-602-5008">
                              <span>410-602-5008</span>
                          </a>
                              <div> * We Deliver</div>
                      </li>
                  </ul><!-- #nav-list -->
              </div><!-- .collapse .navbar-collapse -->
            </div><!-- container -->
        </nav><!-- #header-nav -->
    </header>



    <script type="js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script type="js/script.js"></script>
</body>
</html>
CSS:
body {
    font-size: 16px;
    color: #fff;
    background-color: #61122f;
    font-family: 'Oxygen', sans-serif;
}

#header-nav {
    background-color: #f6b319;
    border-radius: 0;
    border: 0;
}

#logo-img {
    background: url('../images/restaurant-logo_large.png') no-repeat;
    width: 150px;
    height: 150px;
    margin: 10px 15px 10px 0;
}

.navbar-brand {
    padding-top: 25px;
}

.navbar-brand h1 { /*Name of Restaraunt */
    font-family: 'Lora', serif;
    color: #557c3e;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 1px 1px 1px #222;
    margin: 0;
    line-height: .75;
}

.navbar-brand a:hover, .navbar-brand a:link{
    text-decoration: none;
}

.navbar-brand p { /* Kosher cert */
    color: #000;
    font-size: .7em;
    margin-top: 15px;
}

.navbar-brand p span { /* Star-K */
    vertical-align: middle;
}

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

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

#nav-list a:hover {
    background: #E7E7E7;
}

#nav-list a span {
    font-size: 1.8em;
}

#phone {
    margin-top: 5px;
}

#phone a {
    text-align: right;
    padding-bottom: 0;
}

#phone div { /* We Deliver */
    color: #577C3E;
    text-align: right;
    padding-right: 15px;
}

.nabar-header button.navbar-toggle, .navbar-header .icon-before {
    border: 1px solid #61122f;
}

.navbar-header button.navbar-toggler {
    clear: both;
    margin-top: 30px;
    margin-right: 20px;
    float: right;
}
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
141
Reaction score
23
The codes you gave us do not produce a button anywhere to be seen.
The button with class="navbar-toggler" has no Info printed on its surface even if it did show up.
The DIV that houses the H1 is too small and that's where the button lives. Its width has something to do with the bootstrap stylesheet. Have fun with that.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top