How come the hamburger icon is not visible in Bootstrap?

I'm facing an issue where my navbar collapses and the hamburger icon disappears, even though it still functions properly. Here's the actual image of the hamburger icon

I have attempted the following solution, but it still doesn't seem to work.

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 


.techfont{
  font-family: 'Russo One', sans-serif;
  font-size: 1.5em;
  margin-bottom: 10px;
}

.postdate{
  text-align: center;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

.posttitle{
  font-family: 'Russo One', sans-serif;
  font-size: 3em;
  text-align: center;
}

.postcontent{
  font-family: 'Montserrat';
  font-size: 1.5em;
}

.centerstage{
  margin-left: auto;
  margin-right: auto;
}

.btn-comment{
  position: absolute;
  right: 0px;
}

.bigbrand{
  font-size: 1.5em;
}

/*COLOR CHANGER*/
/*Credit and Source: http://codepen.io/thapliyalshivam/pen/dvgXVO*/
.loader{
  filter:hue-rotate(0deg);
  color: linear-gradient(45deg,#0f8,#08f);
  animation:hue 5000ms infinite linear;
}

@keyframes spinify {
  0% {
    transform: translate(0px,0px);

  }
  33% {
    transform: translate(0px,24px);
    border-radius:100%;
    width:10px;
    height:10px;

  }
   66% {
    transform:translate(0px,-16px);
  }

   88% {
    transform:translate(0px,4px);

  }
  100% {
    transform:translate(0px,0px);
  }
}
@keyframes hue{
  0%{filter: hue-rotate(0deg);}
  100%{filter:hue-rotate(360deg);}

}
<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="utf-8">
    <title>KBLOG</title>

    <!-- Latest compiled and manified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Alternative to Bootstrap 4 font_awesome -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- MEDIUM STYLE EDITOR -->
    <script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'css/blog.css' %}">

    <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One" rel="stylesheet">

</head>

<body class="loader">

    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-custom bg-light techfont">
...

                    {% else %}
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'register' %}">Register</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-item nav-link" href="{% url 'user_login' %}" aria-label="Login"><span class="fa fa-user" aria-hidden="true"></span></a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- The actual blog posts -->
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-4">
                    <div class="blog_posts">
                        {% block body_block %}
                        {% endblock %}
                    </div>
                </div>
            </div>
        </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

htmlcss

Answer №1

Just wanted to mention that I utilized my website to save the svg there, hoping that it will work for you.

.techfont{
font-family: 'Russo One', sans-serif;
font-size: 1.5em;
margin-bottom: 10px;
}

.postdate{
text-align: center;
}

.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round'
stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
border-color: rgb(255,102,203);
}

.posttitle{
font-family: 'Russo One', sans-serif;
font-size: 3em;
text-align: center;
}

.postcontent{
font-family: 'Montserrat';
font-size: 1.5em;
}

.centerstage{
margin-left: auto;
margin-right: auto;
}

.btn-comment{
position: absolute;
right: 0px;
}
/* Rest of the CSS code removed for brevity */

<!DOCTYPE html>
{% load static %}
<html>
<!-- HTML and Bootstrap code removed for brevity -->
</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

What is the method for incorporating an upward arrow into a select element, while also including a downward arrow, in order to navigate through options exclusively with

I have a select element that I have styled with up and down arrows. However, I am seeking assistance to navigate the options dropdown solely using these arrows and hide the dropdown list. Here is the HTML: <div class="select_wrap"> <d ...

javascriptjqueryhtmlcss

Create a visual layout showcasing a unique combination of images and text using div elements in

I created a div table with 3 images and text for each row, but I'm struggling to make all the text-containing divs uniform in size. How can I achieve this? Also, I need to center this table on the screen, and currently using padding to do so. Is there ...

javascripthtmlcsscss-tables

Error: The argument passed to int() must be a string, bytes-like object, or number, not 'NoneType' (Issue when sending HTML input to Python)

#!C:\Users\aan\AppData\Local\Programs\Python\Python39\python.exe import numpy as np import skfuzzy as fuzz import cgi from skfuzzy import control as ctrl print("Content-type:text/html\r\n\r\n ...

pythonhtml

Update email address depending on the option chosen from the dropdown menu

My contact form includes the following fields: Name Email Number Department Message The "Department" field is a drop-down selection with seven options: Audio Engineering Graphic Design Music Production Photography Videography Web Development Other I ...

phphtmlformsemailcontact-form

Unable to access localStorage

I created a Plunker to store a value in localStorage: <!DOCTYPE html> <html> <script> localStorage.setItem('test', "hadddddha"); </script> </html> Then, I built a test page to retrieve the value from local ...

javascripthtmllocal-storagesession-storage

Issues with scrolling navigation have been identified in IE8

I am puzzled by the fact that the main navigation on this website is not functioning in IE8. redacted The code for the navigation is quite simple, with a localScroll feature attached to enable the scrolling effect. <ul> <li><a href=" ...

htmlinternet-explorer-8

Event Listener for Spelling Quiz Buttons: Check Correct and Incorrect Answers

I am currently in the process of developing a spelling quiz for a project website using HTML, CSS, and JavaScript. The idea is to present the user with a word that has two missing letters indicated by underscores. The user then selects the correct answer ...

javascripthtmlfunctionbuttonaddeventlistener

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

Is there a variation in HTML/XHTML/XML code based on different geographic regions?

I have a question regarding the consistency of HTML, XHTML, and XML code across different localizations. If I write code on a system using the "en-us" localization, will it remain the same when rendered on a system with the "sv-SE" localization? For examp ...

.nethtmlxmlxhtmllocalization

Endless cycle of invoking functions in Angular.js

Issue with the template : <div class="container"> <h1>Process Definitions</h1> <table class="table table-stripped" > <tr> <td><strong>Name</strong></td> <td><strong>Id</st ...

htmlangularjs

Disabling CSS transitions and attempting to alter the style of an HTML element using JavaScript may not consistently work as expected

Currently, I am in the process of creating an animated effect for a website that involves moving two elements' positions over time and resetting them to their original position. Only one element is displayed at a time, and the animation should run smo ...

javascripthtmlcsscss-transitions

Access within the identical window (PHP file) as opposed to an Iframe

I am currently working with a PHP file that retrieves data from my database. <?php $cdb = new PDO('mysql:dbname=xxx;host=localhost', 'xxx', 'xxx'); foreach ($cdb->query("SELECT * FROM images ORDER BY posted DESC LIMIT ...

phpjavascripthtmlajaxiframe

Navigating a collection of objects in JavaScript: A step-by-step guide

My data consists of objects in an array with the following structure: [{\"user\":\"mcnewsmcfc\",\"num\":11},{\"user\":\"ManCityFNH\",\"num\":7}]; To clean up the array, I'm using this code: ...

javascripthtmlarrays

Is there a way to escape from an iFrame but only for specific domains?

if (top.location != self.location) { top.location = self.location.href; } If my website is being displayed in an iFrame, this code will break out of it. But I want this to happen only for specific domains. How can I perform that check? ...

javascripthtmliframe

How to arrange three buttons in a row using CSS styling

After reviewing similar issues posted by others, I have not found a solution to my problem. Despite trying the suggested solutions, I am unable to center two buttons representing different departments on my webpage. Here is my source code: <script ...

javascriptjqueryhtmlcss

The :not() exclusion in CSS property fails to exclude the class

I'm attempting to style all the links on my webpage in a particular way, except for those in the navigation bar. Despite trying to exclude the navbar links using a:not(.navbar), it seems that the styling still applies to all links, including Link 1 in ...

htmlcsscss-selectors

How to place a circle below text using CSS

I'm attempting to center a 5px x 5px circle under the links in a navigation bar to indicate the current page, but I'm uncertain about how to achieve this effect. Here is the current outcome: Link to Image This is what I aspire to accomplish: Li ...

htmlcssshapes

Is there a way to showcase an HTML body in the Gmail app on iOS?

I am facing a challenge while trying to incorporate HTML formatting in the body of an email shared through Gmail using UIActivityViewController on iOS. Despite my efforts, the Gmail application fails to render the HTML content properly and only displays pl ...

htmliosobjective-cgmailuiactivityviewcontroller

Getting data in a ng-Dialog Modal with AngularJS is a breeze!

Hi there, I'm new to Angular JS and facing an issue with displaying data from my MySQL database in a table as well as in a modal for more detailed information: I've included the HTML file named _detail_modal.html at the bottom of the page. ...

javascripthtmlangularjsng-dialog

Safari causing rotated element to shift by 1px due to CSS3 Transition

Encountering a rendering issue in Safari with 180deg rotated elements. Two examples highlight the problem (tested on Safari 9.1): Odd width problem. The bottom element shifts to the right initially, and further on transition. Even width problem. It appea ...

csssafaricss-transforms