Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Line ups and drop downs

B

Ben2022

New Coder
Im having trouble with this I want my Button text to line up with my h1 and when i squeeze the screen i should have a drop down button the button appears but nothing happens when I click on it what am I doing wrong? Im using Bootstrap 5 and Jquery 3.6 if that helps.



HTML: 
</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" alt="logo image"></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 position-absolute top-0 end-0" 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="navbar-nav" id="nav-list">
                      <li class="visible-xs navbar-item">
                          <a class="nav-link active" aria-current="page" href="menu-categories.html">
                            <span class="fas fa-utensils"></span>
                            <br class=".d-sm-block"> Menu</a>
                      </li>
                      <li>
                          <a class="nav-link" href="#">
                              <span class="fas fa-info-circle"></span>
                              <br class=".d-sm-block"> About</a>
                      </li>
                      <li>
                          <a class="nav-link" href="#">
                              <span class="fas fa-certificate"></span>
                              <br class=".d-sm-block"> Awards</a>
                      </li>
                      <li id="phone" class=".d-sm-block">
                          <a class="nav-link href="tel:410-602-5008">
                              <span>410-602-5008</span>
                          </a>
                              <div> * We Deliver</div>
                      </li>
                  </ul><!-- #nav-list -->
              </div><!-- .collapse .navbar-collapse -->
            </div>
        </nav>
 
Sort by date Sort by votes
Hi there!

We'd be more than happy to help you out with getting your button to line up with your H1 then have the bottom move to the next line on smaller screens - however, can you post your CSS code so that we can review it and provide you with the most appropriate solution?
 
Upvote 0 Downvote
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-top: 0;
    margin-bottom: 0;
    line-height: .75;
}

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

.navbar-toggler {
    float: end;
}

.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;
}
 
Upvote 0 Downvote
Ben2022 said:
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-top: 0;
    margin-bottom: 0;
    line-height: .75;
}

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

.navbar-toggler {
    float: end;
}

.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;
}
Click to expand...
Thank you. Could you provide all of the HTML code as well?
 
Upvote 0 Downvote
Malcolm said:
Thank you. Could you provide all of the HTML code as well?
Click to expand...
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>David Chu's China Bistro</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/all.min/css">
    <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:wght@300;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" alt="logo image"></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 position-absolute top-0 end-0" 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="navbar-nav" id="nav-list">
                      <li class="visible-xs navbar-item">
                          <a class="nav-link active" aria-current="page" href="menu-categories.html">
                            <span class="fas fa-utensils"></span>
                            <br class=".d-sm-block"> Menu</a>
                      </li>
                      <li>
                          <a class="nav-link" href="#">
                              <span class="fas fa-info-circle"></span>
                              <br class=".d-sm-block"> About</a>
                      </li>
                      <li>
                          <a class="nav-link" href="#">
                              <span class="fas fa-certificate"></span>
                              <br class=".d-sm-block"> Awards</a>
                      </li>
                      <li id="phone" class=".d-sm-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>
        </nav>

    </header>



    <script type="js/jquery-3.6.0.min.js"></script>
    <script type="js/bootstrap.min.js"></script>
    <script type="js/script.js"></script>
</body>
</html>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom