Create a new navigation bar modeled after Bootstrap v3.3.6 but updated to use Bootstrap v4.5.0

Currently, I am enrolled in an online course that covers HTML, CSS, and JavaScript. The course utilizes Bootstrap v3.3.6.

I made a decision to follow the course using Bootstrap v4.5.0 instead. One of the tasks involves creating a navigation bar with a logo, title, and a menu button that only appears on smaller screens.

You can view an example here: 

      body {
        font-size: 16px;
        color: #fff;
        background-color: #61122f;
        font-family: 'Oxygen', sans-serif;
      }

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

      #logo-img {
        background: url('https://www.shiva.com/Files/Directory%20Folders/19822_1.png') no-repeat;
        width: 170px;
        height: 150px;
        margin: 10px 15px 10px 0;
      }

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

      .navbar-brand h1 { /* Restaurant name */
        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:focus {
        text-decoration: none;
      }
      .navbar-brand p { /* Kosher cert */
        color: #000;
        text-transform: uppercase;
        font-size: .7em;
        margin-top: 15px;
      }
      .navbar-brand p span { /* Star-K */
        vertical-align: middle;
      }
  <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>David Chu's China Bistro</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
  </head>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="pull-left visible-md visible-lg">
            <div id="logo-img"></div>
          </a>

          <div class="navbar-brand">
            <a href="index.html"><h1>David Chu's China Bistro</h1></a>
            <p>
              <img width="25" height="25"src="https://upload.wikimedia.org/wikipedia/en/thumb/1/19/Star-K_logo.jpg/340px-Star-K_logo.jpg" alt="Kosher certification">
              <span>Kosher Certified</span>
            </p>
          </div>

         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>

        </div>
      </div>
    </nav>

  </header>


  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
  </body>
</html>

https://jsfiddle.net/8ke1fn7p/2/

I opted for updating the code to Bootstrap v4.5.0 by replacing the outdated classes with new ones provided by Bootstrap. For the menu button, I utilized the updated syntax from Bootstrap's official documentation.

Following these changes, I noticed two main differences when viewing on an extra-small screen:

  1. The h1 title no longer wraps to a new line
  2. The menu button shifts to a new line
  3. The yellow navbar does not extend to the end of the screen

Here is the result after modifying the code for Bootstrap v4.5.0 

body {
  font-size: 16px;
  color: #fff;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

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

#logo-img {
  background: url('https://www.shiva.com/Files/Directory%20Folders/19822_1.png') no-repeat;
  width: 170px;
  height: 150px;
  margin: 10px 15px 10px 0;
}

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

.navbar-brand h1 { /* Restaurant name */
  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:focus {
  text-decoration: none;
}
.navbar-brand p { /* Kosher cert */
  color: #000;
  text-transform: uppercase;
  font-size: .7em;
  margin-top: 15px;
}
.navbar-brand p span { /* Star-K */
  vertical-align: middle;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>David Chu's China Bistro</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
  </head>
<body>
  <header>
    <nav id="header-nav" class=" navbar navbar-expand-sm navbar-light">
       <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="float-left d-none d-md-block d-lg-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 width="25" height="25" src="https://upload.wikimedia.org/wikipedia/en/thumb/1/19/Star-K_logo.jpg/340px-Star-K_logo.jpg" alt="Kosher certification" alt="Kosher certification"/>
          <span>Kosher Certified</span>
          </p>
          </div>

         <button class="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>
    </div>
  </nav>

</header>


  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

https://jsfiddle.net/8ke1fn7p/3/

Despite numerous attempts, I have been unable to pinpoint the problem causing these issues.

htmlcsstwitter-bootstrap-3bootstrap-4

Answer №1

After some investigation, I believe I have identified the solution as the outcome now closely resembles the example.

A noticeable change from Bootstrap v3.3.6 is the absence of certain styles in the corresponding classes.

To address this issue, I decided to embed the style directly within the HTML tags to keep it separate from the rest of the code.

      body {
        font-size: 16px;
        color: #fff;
        background-color: #61122f;
        font-family: 'Oxygen', sans-serif;
      }

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

      #logo-img {
        background: url('https://www.shiva.com/Files/Directory%20Folders/19822_1.png') no-repeat;
        width: 170px;
        height: 150px;
        margin: 10px 15px 10px 0;
      }

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

      .navbar-brand h1 { /* Restaurant name */
        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:focus {
        text-decoration: none;
      }
      .navbar-brand p { /* Kosher cert */
        color: #000;
        text-transform: uppercase;
        font-size: .7em;
        margin-top: 15px;
      }
      .navbar-brand p span { /* Star-K */
        vertical-align: middle;
      }
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>David Chu's China Bistro</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
      </head>
    <body>
      <header>
        <nav id="header-nav" class=" navbar navbar-expand-sm navbar-light">
           <div class="container">
            <div>
              <a href="index.html" class="float-left d-none d-md-block d-lg-block">
                <div id="logo-img"></div>
              </a>
         
              <div class="navbar-brand" style="float: left; height:50px; white-space: normal;"> 
                <a href="index.html"><h1>David Chu's China Bistro</h1>
                </a>
               <p>
                 <img width="25" height="25" src="https://upload.wikimedia.org/wikipedia/en/thumb/1/19/Star-K_logo.jpg/340px-Star-K_logo.jpg" alt="Kosher certification" alt="Kosher certification"/>
              <span>Kosher Certified</span>
              </p>
              </div>

             <button style="position: relative; float: right;"class="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>
        </div>
      </nav>

    </header>


      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-2.1.4.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>
    </html>

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

Padding on a flex item nudges a neighboring flex item out of place

Encountering an issue - within a div container, I have 4 nested divs using the grid system. Oddly enough, the third div in the grid is not behaving as expected. When setting a margin-bottom for this div, instead of creating space at the bottom, it pushes ...

htmlcssflexboxmargin

problem specifically occurring on tablets with fixed positioning

Have you checked out the site I'm referring to here? An unusual issue seems to be occurring specifically on tablets. We implemented the scroll to fixed jQuery plugin to fix the position of the sidebar after scrolling, which works perfectly on all de ...

jqueryioscssipadtablet

Utilize Multidimensional Arrays in HTML

I have a pair of fields called url and id. <input type='url' name='data[web][url]'><input type='number' name='data[web][id]'> <input type='url' name='data[web][url]'><input t ...

phphtmlarrays

"Enhance your UI design with Bootstrap 3.0 by adjusting the datepicker's position from right to left

I'm having trouble adjusting the position of a datepicker from bootstrap, specifically changing it from right to left. Here is the HTML code I am using: <div class="col-sm-8 input-group date " id="dpYears" data-date="12-02-2012" data-date-format= ...

jqueryhtmlcsstwitter-bootstrap-3

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

javascriptjqueryhtmlcssnav

Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

Below is the layout structure on my website: <div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div> <div class="panel-body"> <div class="col-md-7"> <h3><span class= ...

javascriptjquerycsstwitter-bootstrap

Activate button upon Enter key press

Looking to modify this code so that the "calculate" function is triggered upon pressing enter instead of the button. How can this be achieved? The current functionality is working fine, but I want to enhance it with an enter key press. <!DOCTYPE html> ...

javascripthtml

Displaying a Key/Value pair as a clickable link using AngularJS

Having difficulty generating links from KeyValue pairs in an object using AngularJS. The object is created in C# with the code snippet below: Dictionary<int, string> page = new Dictionary<int, string>(); updatedCountryNodesLis ...

javascripthtmlangularjs

Each time the page refreshes, the list will rotate

Imagine having a website where three rows of information are loaded, but you only want one random row to load each time the page is refreshed. What would be the most efficient code to achieve this unique loading pattern? ...

phphtml

Tips for troubleshooting a sass file that is not displaying changes in the browser

Currently working on my portfolio website using bootstrap and sass along with a theme kit. Initially, I attempted to implement a grid column style for the intro-section but had a change of heart and deleted the style. Surprisingly, every time I refresh my ...

htmlcsssassbootstrap-5

Please request user input in order to generate a multiplication chart

Is there a way to ensure that the program works properly so that when the user inputs a value, it is included in the multiplication table? <html> <head> <title> Multiplication Table </title> <style> body{ font-family: aria ...

javascripthtmlcss

Wrapping a series of grids within a parent container to manage height effectively with grid960

Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...

htmlcsslayout

The toggle button appears to be lacking in CSS styling

I'm trying to create a dropdown button using Bootstrap and ng-bootstrap in my Angular project. Here's the HTML I've written: <div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownBasic1" n ...

cssangulartwitter-bootstrap-3angular6ng-bootstrap

What is the process for implementing the sticky table header jQuery plugin?

I am looking to implement a sticky header on all tables in my web application, which is built on PHP. As the amount of data continues to grow, search results are fetching more records that may not be visible. I am primarily a PHP programmer and do not have ...

javascriptjqueryhtml

Obtain the full HTML code for a Facebook album

I am attempting to extract the HTML code from a Facebook album in order to retrieve the photo links. However, since not all photos load at once, cURL only retrieves the links of photos that are initially loaded. Is there a way to fetch the entire loaded H ...

phphtmlfacebookcurl

Tips for shifting div background image while the push menu is in use

Looking for a Solution: I'm trying to figure out how to adjust my background image within a div when the push menu is active. Here's the CSS I'm currently using: .webcam-bg { background-attachment: fixed; background-image: url("../ ...

jqueryhtmlcss

Can one select a radio button without corrupting the data in VUE?

How can I preselect a value for radio buttons created using Vue's List Rendering without having a dataset in the script? Below is the code snippet for a better understanding of my goal: SCRIPT: data() { return { formData: {} //formData st ...

javascripthtmlvue.js

Methods to disregard class prefix in css document

When I inspect elements in the Chrome console, I notice styles applied to certain divs/buttons like this: /* Sample Chrome browser styles */ .ItemClass1-0-3-171.ItemClass2-0-3-173: { background-color: "red" } I'm wondering how I can def ...

csssass

Ways to enhance the appearance of the parent element when the radio button is clicked

Hey there! So, I have a situation where I'm working with two radio buttons and I want to apply certain CSS styles to the parent box (<div>) when a radio button is selected (checked). Here's how I want it to look: box-shadow: 0 0 5px #5cd05 ...

javascriptjqueryhtmlcss

Place objects at the bottom of the container

Is there a way to align each "Read more" button at the bottom of its respective div without setting a specific height for the divs or changing any markup or style elements? While pseudo class selectors could be used, is there a simpler approach that would ...

htmlcss