Personalized Bootstrap 4.1 Toggle Animation

I have been attempting to implement a customized menu toggle on Bootstrap 4.0's Navbar menu, using the code provided by Codeply HERE. My goal is to apply the X toggle style to my website's bootstrap navbar. Below is the current setup I have implemented:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
    <link rel="stylesheet" href="CSS/main.css"> 
    <link rel="stylesheet" href="CSS/Bootstrap-Overrides.css"> 
</head>  
<body>
    <nav class="navbar navbar-expand-md navbar-custom">
        <a href="/" class="navbar-brand"><img src="Blank" alt="blank" height="80" width="185"></a>
    <div class="container-fluid">  
            <div class="row">
                <div class="col-sm-4">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="navbar-collapse-x">
                            <ul class="nav navbar-nav navbar-right">
                            <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
                            <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
                            </ul>
                        </div> .navbar-collapse 
                    </nav>
                </div>
            </div>
        </div>
        <div class="navbar-collapse collapse" id="navbar2">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Info<span class="sr-only">Information Section</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services<span class="sr-only">Services Section</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact<span class="sr-only">Contact Section</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">FAQ<span class="sr-only">Frequently Asked Questions</span></a>
                </li>
            </ul>
        </div>
    </nav>

I seem to be encountering issues with this implementation - it appears messy and dysfunctional compared to the original structure. Any insights or suggestions on what might be going wrong here?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're using the latest version of bootstrap v4.0, the codepen code will not work as it is designed for bootstrap v3.3.

The documentation for the bootstrap 4.0 navbar is very comprehensive and includes numerous examples.

For more information, visit this link

Yes, anything is achievable. Here is a solution using bootstrap 4.

Take a look at the sass fiddle here: https://jsfiddle.net/joshmoto/7syc3hfu/1/

/* custom styling for navbar button */
.navbar-toggler {
  background: none;
  border: none;

 
  &:active, &:focus {
    outline: 0;
  }


  
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin: 4px 0 4px 0;
    transition: all 0.2s;


    .navbar-dark & {
      background: #ffffff;

    }

   
    &:nth-of-type(1) {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }


    
    &:nth-of-type(2) {
      opacity: 0;
      filter: alpha(opacity=0);
    }


    
    &:nth-of-type(3) {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
    }

  }


  
  &.collapsed {

   
    .icon-bar {

      
    
      &:nth-of-type(1) {
          transform: rotate(0);
      }
    

     
      &:nth-of-type(2) {
          opacity: 1;
          filter: alpha(opacity=100);
      }

     
      &:nth-of-type(3) {
          transform: rotate(0);
      }

    }

  }

}

The sass produces this css output.

.navbar-toggler {
  background: none;
  border: none;
}

.navbar-toggler:active,
.navbar-toggler:focus {
  outline: 0;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin: 4px 0 4px 0;
  transition: all 0.2s;
}

.navbar-dark .navbar-toggler .icon-bar {
  background: #ffffff;
}

.navbar-toggler .icon-bar:nth-of-type(1) {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .icon-bar:nth-of-type(2) {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .icon-bar:nth-of-type(3) {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
  transform: rotate(0);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
  transform: rotate(0);
}

To access the CSS version, check out this fiddle: https://jsfiddle.net/joshmoto/9r8ux6p5/

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

jQuery Slider Showing Incorrect Images

My jQuery slider is acting strangely. It hides the first image, shows the second one, but then just repeats the cycle by showing the first image again instead of loading the third one. I'm puzzled about what could be causing this issue in my code. Do ...

javascriptjqueryhtmlcss

Tips for achieving consistent text and image alignment through CSS styling

My table currently contains a default profile image. Initially, there might not be any text content and I have set up the CSS styling to allow text to wrap around the default image. I am facing an issue when trying to position the image statically in a wa ...

htmlcsspositioning

How to Retrieve Data from an HTML Table using the Laravel Framework

I have a unique and interactive Dynamic Sortable Table where I can effortlessly add or delete rows likethis uploaded image here. There is an intriguing loop in my controller that runs precisely 4 times, based on the number of columns in the table. However, ...

phphtmlmysqllaravel

Fade effect on content in Bootstrap carousel

I am currently making some updates to the website mcelroymotors.com. One issue I have encountered while working on the homepage carousel is that the caption only pops up on the first slide, and does not appear on any of the subsequent slides. I would lik ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble incorporating custom elements with the document.execCommand function

I have been attempting to insert a custom element into an editable div using the document.execCommand method as described in detail on https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand. However, when I try to add a custom polymer eleme ...

htmlpolymer

Creating a navigation bar in React using react-scroll

Is anyone able to assist me with resolving the issue I am facing similar to what was discussed in React bootstrap navbar collapse not working? The problem is that although everything seems to be functioning properly, the navbar does not collapse when cli ...

htmlcssreactjs

Border shifts on hover effect

After much trial and error, I finally managed to center two links in a nav bar perfectly on the page. I also added a grey bottom border that spans the entire width of the page, with the hover effect turning it blue under the links. Check out this example: ...

csshoverborder

Begin the ul element from the left-hand side

Check out my latest JSFiddle creation: http://jsfiddle.net/alonshmiel/Ht6Ym/2409/ I'm attempting to align the ul element on the left side of the page: I've experimented with the following CSS rules: margin-left:0px; float: left; Unfortunatel ...

htmlcss

Set up dynamic restrictions for the length of an HTML paragraph with PHP

I am attempting to dynamically set the limit of content retrieved from a database in PHP. Specifically, I need to trim the input from the database before assigning it to an HTML paragraph. I attempted to use the substr function but was unsuccessful. Can y ...

phphtml

Drawing a personalized cursor using JavaScript on a canvas

I've been working on creating a canvas that allows for drawing in vanilla JavaScript. Although I've successfully enabled drawing on the canvas, I'm now looking to implement a feature where a preview dot shows up when the user presses down be ...

javascripthtmlcanvashtml5-canvas

What is the process of turning an SVG element into a clickable link?

Is there a way to transform each element within an SVG image embedded in an HTML file into an active link? I want to create an SVG image with clickable elements. Here is a snippet of the SVG image: <svg version="1.1" id="Layer_1" xmlns="http://www.w3 ...

javascriptjqueryhtmlsvg

Concealing excess background color in HTML/CSS

I'm currently experimenting with adding a background color shape, such as a large rotating div, to the background of my website. However, I've encountered an issue where placing this background in the desired location is causing a large margin to ...

htmlcss

Dynamic Bootstrap Table with Fixed Header

I am customizing a Bootstrap table by adding CSS for a sticky header. My code snippet includes the following: .table-sticky th { background: #fff; position: sticky; top: -1px; z-index: 990; } <div class ...

htmlcsstwitter-bootstrapbootstrap-4

Discover the way to create an HTML button with a mesmerizing transparent effect

For my website creation using Dreamweaver, I came up with the idea of utilizing Photoshop to design backgrounds. The reasoning behind this choice was that if I needed to modify button names at any point, I could simply edit the code and make the necessary ...

htmlcss

Viewing all album titles simultaneously using the Flickr API

After trying a different approach due to lack of responses to my previous question, I am still facing the same issue. My code successfully retrieves all album names and corresponding photos from Flickr API, but it displays all album names at once followed ...

htmljqueryflickr

Unable to generate new entries with HTML Form

I've been working on creating a simple form with the ability to add new seasons or entries that will be posted to a database, but I've hit a roadblock. Whenever I try to run it, the "Add more Episodes" buttons for new seasons don't seem to w ...

javascriptphphtmlmysql

Prevent the display of hyperlinks in the status bar when hovering over a hyperlink or button

The application I'm working on has a default status bar at the bottom of each screen that displays URLs linked to buttons and icons. For example: https://i.stack.imgur.com/ZFTsp.jpg I am trying to prevent the display of URLs associated with hyperlin ...

javascriptjqueryhtmlhyperlinkstatusbar

Discovering the method for retrieving JavaScript output in Selenium

Whenever I need to run JavaScript code, the following script has been proven to work effectively: from selenium import webdriver driver=webdriver.Firefox() driver.get("https:example.com") driver.execute_script('isLogin()') However, when I atte ...

javascriptpythonhtmlfunctionselenium

Triggering a system context menu through a longpress gesture on the MobileFirst iOS app is a

After experimenting with our MobileFirst iOS app, I noticed that if you hold down on any anchor links for more than 2 or 3 seconds, iOS will bring up a built-in menu displaying the internal path of the current HTML page. I'm unsure whether this behav ...

htmlcordovaibm-mobilefirst

Issue with React Toastify display not showing

I'm having trouble getting a pop-up alert to appear when a user interacts with a radio button. I've included the relevant code snippet below. Even though I see the console message when I select a radio button, the pop-up doesn't show up. Can ...

htmlreact-toastify