Create a header using Bootstrap framework

I'm facing some difficulties with incorporating a bootstrap header into my code. I don't believe it's due to an error on my end, but I'm unsure of how to resolve it.

The navigation menu always appears in phone view or something similar. I've added my code to a JSFiddle so you can take a look at the issue:

Here is the link: https://jsfiddle.net/wx86vq2y/2/

I also have a screenshot showing how it should appear: https://gyazo.com/aca2e255638350dc386812ea9878ecfe.
Does anyone know what the issue might be? I'm currently unable to fix this problem myself.

Answer №1

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Dize Design AOS-Header v.2</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Project</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

To fix this issue, you can replace the beta version of Bootstrap 4 CSS with Bootstrap 3 CSS from bootstrap3 url

Kindly review the provided sample for reference.

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

Javascript's most frequent appearance

My knowledge of JavaScript is quite limited and basic. Essentially, I am trying to create a pop-up that displays the answer based on the values entered. The issue I'm encountering with the code below is that when I input an array like 1,2,3,2, the out ...

Encountering difficulties loading Google Maps with jQuery

When attempting to load a map on my page, I encountered a problem when including the jquery.min.js file in the head tag. If it is included, I receive an initMap : no such method error. However, if I reverse the order of inclusion, with maps first and then ...

Changing the date from UTC to EST (Using Javascript and HTML)

I'm working with Vue to display some data, but I've run into an issue - the date stored in the created_at field is in UTC (I need it to be in EST). <div class="row"> <div class="col-md-3" v-for="resul ...

Drop down menus fail to appear after the screen has been resized

Creating responsive menus involves using ordered and unordered lists, along with CSS for styling. I have added a script to dynamically generate dropdown menus, but encountered an issue where nothing appears on the screen upon resizing - only the backgrou ...

Elements not being styled by CSS properties

I am facing an issue with a CSS file designed to theme a page in white on black, as opposed to the usual black on white. body { background-color: black; } h1 h2 h3 h4 h5 h6 p { color: white; } However, the color: white; property is not being applied ...

navigation bar: retain link hover state even after displaying sub-menu

My navigation bar has submenus with background images in .png format. Only 3 links in my navbar have these submenus. The issue I am facing is that when the menu link is in a hover state and the submenu is being hovered over, the nav link loses its hover st ...

Apply a CSS3 Box Shadow to a diagonal corner

Currently, I am exploring some new coding techniques to enhance my skills. I have a slanted left corner design element. Now, I am trying to incorporate a box shadow effect as shown in the following image: https://i.sstatic.net/1MnL2.png This is the code ...

What is the best way to align every element in a single corner using Flexbox CSS?

My goal is to place a link in each corner (left, top, right, bottom) using Flexbox. I attempted using top: 0 or adjusting the flex-direction to column. .container { position: relative; } .top { display: flex; justify-content: space-b ...

Having Trouble with Gulp and AutoPrefixer Integration

I have integrated Gulp into my project and am looking to utilize the autoprefixer feature. Here is a glimpse of my current gulp file: // Including gulp var gulp = require('gulp'); // Including necessary plugins var concat = require('gulp-c ...

Can you employ a right-side offset in Bootstrap 4?

Is it possible to align a button with a textbox using the Bootstrap 4 layout system? https://i.sstatic.net/tN9II.png <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div ...

Top section of a table repaired

It seems that the position fixed attribute is not working as expected in this scenario. I might be missing something. I'm trying to keep the input boxes in the first row frozen when scrolling, but none of the solutions I've found seem to be effe ...

How can you achieve the effect of "hovering over an image to automatically start playing a muted video within the image itself"?

[![enter image description here][1]][1]I am working with WordPress and Elementor, and I want to create a hover effect where an image triggers a muted video to play within the image area on mouseover. The video should stop playing when the mouse is not hove ...

Looking to modify the styling of links in an unordered list?

Let me explain what I attempted to accomplish CSS: li:nth-child(2n) { background-color:gray; } HTML: <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> ...

What is the best way to align 3 boxes on the same line?

Below is the code that I have written: <!-- Home Boxes Section2 --> <?php for($bx=1; $bx<2; $bx++) { if( get_theme_mod('page-setting'.$bx)) { $bxquery = new WP_query('page_id='.get_theme_mod(' ...

What steps are involved in integrating QuickBlox on your website?

I am completely new to web development and have a question about integrating QuickBlox into my website using JavaScript. I have included the necessary JavaScript files in my website and set up the QuickBlox admin application, but I'm not sure how to p ...

Adjusting the height of the search icon through the Jquery toggle action to create animated effects

While trying to create a search field with the click function (animate), I noticed an issue similar to what is seen in this example: . Whenever the search icon is clicked, it moves up and down unexpectedly, and I am uncertain as to why this behavior is occ ...

Execute JavaScript function when the page is being refreshed or accessed from an external link

On the Home page, we have a special Lottie animation that serves as a preloader. This animation should only display under certain conditions: Accessing the home page by clicking on a link from an external page (not on your website) Refreshing the brow ...

What is the best way to ensure that three images stretching across the entire width of the website are responsive?

I am looking to showcase 3 images across the full width of my website, with each image taking up one-third of the space. I want these images to be responsive and adjust accordingly to different screen sizes while maintaining their aspect ratio. Do you have ...

Retrieve the current font style with Kendo UI Editor

Recently, I've been facing some challenges while working with the Kendo UI Editor. Specifically, I'm struggling to retrieve the current font style. My goal is to use JavaScript or jQuery to obtain the following values: Values I am looking for: ...

Move the div to the bottom of its container

Is there a way to place a div at the bottom of its containing div? <style> .outside { width: 200px; height: 200px; background-color: #EEE; /*for visibility*/ } .inside { position: absolute; bottom: 2px; } </style> <div c ...