Few things to know before starting:-
I'm using Django (python)
I'm using Bootstrap
And Obviously I'm using html and css
What I did (in order, when before I got an error):
I copied the navbar template from the bootstrap navbar docs
I linked my own custom css and js file from the static directory of django in the following order below:-
Javascript Files
(Copied from Bootstrap, so don't mind the comments) :)
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="{% static '/js/script.js' %}" type="text/javascript"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
Css Files
<link rel="stylesheet" href="{% static 'css/styles.css'%}" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
Code in main html file
{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{% static 'css/styles.css'%}" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<title>{%block title%} {%endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img
src="{% static '/img/Socklet-logos.jpeg' %}"
alt="error in loading static files, may encounter bad design"
id="brand-logo"
class="float-start"
/>
<h1 id="brand">{%block brand%}{%endblock%}</h1></a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarSupportedContent navbar"
>
<ul class="navbar-nav me-auto mb-2 mb-lg-0" id="navigation-bar">
<li class="nav-item" id="nav">
<a
class="nav-link active"
aria-current="page"
href="#"
id="nav-link"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-house-door"
viewBox="0 0 16 16"
class="nav-icon"
>
<path
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"
/>
</svg>
Home</a
>
</li>
<hr style="color: white" />
<li class="nav-item" id="nav">
<a class="nav-link" id="nav-link" href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-kanban-fill"
viewBox="0 0 16 16"
class="nav-icon"
>
<path
d="M2.5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-11zm5 2h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-5 1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3zm9-1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"
/>
</svg>
Projects</a
>
</li>
<hr style="color: white" />
<li class="nav-item dropdown" id="nav">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
id="nav-link"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-three-dots"
viewBox="0 0 16 16"
class="nav-icon"
>
<path
d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"
/>
</svg>
More
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Book Club</a></li>
<li><a class="dropdown-item" href="#">Blog</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Our Employees</a>
</li>
</ul>
</li>
</ul>
<div class="d-flex">
<a href="{{login_logout_link}}">
<button
class="btn btn-outline-success"
name="login"
id="login-btn"
>
{{login_logout}}
</button>
</a>
</div>
</div>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="{% static '/js/script.js' %}" type="text/javascript"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>
Code in custom Css file
#media screen and (max-width: 767px) {
.nav-icon {
height: auto;
width: auto;
max-height: 40px;
max-width: 140px;
}
}
#media screen and (min-width: 768px) {
.nav-icon {
height: auto;
width: auto;
max-height: 50px;
max-width: 125px;
}
}
#nav {
font-size: 30px;
}
#nav:hover {
background-color: black;
text-shadow: 500px;
}
#login-button {
align-items: right;
}
#brand:hover {
color: black;
}
#login-btn {
height: 45px;
width: 100px;
}
#nav-link {
padding: 10px;
}
svg {
height: 30px;
width: 30px;
}
#media (min-width: 767px) {
#brand {
padding-right: 250px;
font-size: 50px;
}
#brand-logo {
padding-right: 10px;
height: auto;
width: auto;
max-width: 250px;
max-height: 90px;
}
}
#brand-logo {
height: auto;
width: auto;
max-width: 100px;
max-height: 55px;
padding-right: 5px;
}
#navigation-bar {
align-items: center;
}
But here's the final output with a gif in which I'm clicking the dropdown but it doesn't slide:-
The id on:
<div
class="collapse navbar-collapse"
id="navbarSupportedContent navbar"
>
Must have the same value as data-bs-target="#navbarSupportedContent". That's how the button and the dropdown <div> are linked.
Try changing it to id="navbarSupportedContent"
Related
Basically have the right section of the navbar reserved for text/an alert that will be placed there depending on if certain things happen. But, the alert, even when invisible, changes the height of the navbar. How do I fix this?
It might be hard to tell with the images but there's definitely a difference with the popup and when it's closed.
This is using the latest bootstrap v5.2.3
.navbar-brand img {
height: 50px;
width: 50px;
}
.alert svg {
height: 20px;
width: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" />
<nav class="navbar navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/100" alt="Bootstrap" width="30" height="24">
</a>
<span class="navbar-text text-dark" id="wallet_address">
<div class="alert alert-warning d-flex align-items-center alert-dismissible fade show" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
<strong>ERROR!</strong> No Wallet detected.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</span>
</div>
</nav>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
edit: updated css and bootstrap version
It doesn't look like the alert is affecting anything while it's invisible. The alert has 1rem of margin on the bottom, which calculates out to make the entirety of the alert 90px tall. The available space of the nav by default is less than 90px, so including the alert in that space forces the nav to expand to accommodate the alert. Note the yellow area (margin) in the image.
The reason your nav has a height larger than expected when the alert is missing is because the navbar-brand class has some top and bottom padding, probably coming from bootstrap. Note the purple area (padding) in the image.
I want to create a small Bootstrap dropdown, But I don't know how, Here's what it looks like
base.html:
<a class="text-light" data-bs-toggle="dropdown" aria-expanded="false">
<svg width="12" height="14" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-dark bg-dark">
<li><a class="dropdown-item text-light" href="#">edit</a></li>
<li><a class="dropdown-item text-warning" href="#">report</a></li>
<li><hr class="dropdown-divider border-top border-secondary"></li>
<li><a class="dropdown-item text-danger" href="#">delete</a></li>
</ul>
As Cervus camelopardalis said in their answer, you should modify the dropdown since Bootstrap doesn't offer different sizes. I've just tried to make the dropdown look like the screenshot you posted as much as I could.
Since your code has some problems, I just used the official dropdown from Boostrap site. This is the latest version, I'll try to explain everything I did.
.btn {
width: 30px !important;
height: 30px !important;
padding: 0 !important;
border: none !important;
}
.dropdown-menu {
min-width: 100px !important;
}
.dropdown-item {
padding: 0px 5px !important;
font-size: 12px !important;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg width="12" height="14" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</button>
<ul class="dropdown-menu dropdown-menu-dark bg-dark">
<li><a class="dropdown-item" href="#">edit</a></li>
<li><a class="dropdown-item text-warning" href="#">report</a></li>
<li><hr class="dropdown-divider border-top border-secondary"></li>
<li><a class="dropdown-item text-danger" href="#">delete</a></li>
</ul>
</div>
First of all, beside every CSS class, I added !important to override Bootstrap default stuff. In production, you should add your CSS file above Bootstrap CSS and then remove !important.
In the .btn class, I changed the width and height to 30px to change the size of the three dots button, also I removed padding as well as the borders to make it look nicer as the screenshot.
Thanks for Cervus camelopardalis, I used the same code to change the dropdown menu size.
I am building a website using html, css and bootstrap for my podcast, my problem is that I want to put a player of the podcast in the hero image part of the website so people can come and listen to my podcast at the moment of entering into the website. I want the player to use the RSS Feed of my podcast to always update the player with the latest episode, I hace been trying to look for a solution for that but I have found anything. I made an account here on stack overflow to reach some expert on this field to help me with this problem. I will attach some pictures of the design to illustrate my problem much better: So this is how I want it to look like I just need it to play the podcast and get updated every time I upload a new episode.
I put my code of what I have until now to see if is of help to resolve this. Thanks you all!
#charset "utf-8";
/* CSS Document */
.wrapper {
background: transparent linear-gradient(180deg, #07050B 0%, #18191F 48%, #2A2E34 100%) 0% 0% no-repeat padding-box;
margin-top: -60px;
padding-top: 40px;
}
.navbar {
margin: 62px auto auto 141px;
}
.navbar-brand img {
max-width: 60%;
}
.nav ul {
margin: -45px auto auto;
padding-left: 700px;
list-style: none;
display: table;
width: 38px;
text-align: left;
}
.nav li {
display: table-cell;
position: relative;
padding-right: 10px;
}
.nav a {
color: #fff;
text-decoration: none;
display: flex;
position: relative;
font-size: 14px;
}
.nav a:after {
bottom: 0;
content: "";
display: block;
height: 4px;
left: 10%;
position: absolute;
background: #FFE064;
transition: 0.1s ease 0s, center 0.3s ease 0s;
width: 0;
}
.nav a:hover:after {
width: 100%;
left: 1px;
}
.nav a:hover {
font-weight: bold;
}
#Component_6_1 {
scroll-behavior: smooth;
display: flex;
margin-bottom: 30px;
}
#heroImage {
padding-top: 140px;
padding-bottom: 160px;
}
#Calltoaction{
font-size: 45px;
font-weight: 900;
letter-spacing: 4px;
}
.platfomrs {
margin-right: 80px;
}
.platfomrs a {
padding-left: 21px;
}
#calltoaction {
background-color: #FFE064;
}
.titulo {
font-size: 45px;
font-weight: 900;
letter-spacing: 4px;
margin-top: 75px;
}
#blog {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Sealights Designs">
<meta name="description" content="El Podcast Libertario es el lugar donde aprendes a recuperar tu libertad de pensamiento, donde hablamos temas desde filosofia hasta economia y como tu, el individuo, puedes ser mas feliz con mas libertad">
<meta name="keywords" content="HTML, CSS, JavaScript">
<!-- Title -->
<title>Podcast Libertario - Inicio</title>
<!-- Links -->
<link rel="shortcut icon" type="image/png" href="favicon.ico/favicon-16x16.png"/>
<link rel="stylesheet" href="css/inicio.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>
<!-- Scripst -->
<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>
</head>
<body>
<div class="wrapper">
<header class="container-fluid">
<nav class="navbar navbar-transparent "> <a class="navbar-brand" href="#"> <img src="images/Podcast Libertario Logo.svg" alt="logo"/> </a> </nav>
<div class="nav">
<ul>
<li><a class="nav-item nav-link text-white" href="#">Inicio</a></li>
<li><a class="nav-item nav-link text-white" href="#">Episodios</a></li>
<li><a class="nav-item nav-link text-white" href="#">Blog</a></li>
<li><a class="nav-item nav-link text-white" href="#">Descargas</a></li>
<li><a class="nav-item nav-link text-white text-nowrap" href="#">Sobre Nosotros</a></li>
<li><a class="nav-item nav-link text-white" href="#">Contacto</a></li>
</ul>
</div>
</header>
<article class="conteiner-fluid">
<div id="heroImage" class="d-flex justify-content-center">
<aside> <img src="images/Copia de logolittle.jpg" width="400" height="400" alt="Cover"/>
<audio controls>
<source src="http://cast.rocks/hosting/24334/85-Himno-destazandolibros.mp3" type="audio/mpeg">
</audio>
</aside>
</div>
<section class="d-flex justify-content-center"> <a href="#anfitriones container-fluid">
<svg id="Component_6_1" data-name="Component 6 – 1" xmlns="http://www.w3.org/2000/svg" width="36" height="19" viewBox="0 0 35.604 18.918">
<path id="Path_2055" data-name="Path 2055" d="M36.732,13.515,39.853,10H4.249L7.2,13.515l14.759,15.4Z" transform="translate(-4.249 -10)" fill="#ffe064"/>
</svg>
</a> </section>
</article>
</div>
<section id="calltoaction" class="container-fluid">
<p id="Calltoaction" class="d-flex justify-content-center">¡ESCUCHANOS EN TODAS LAS PLATAFORMAS!</p>
<div class="platfomrs d-flex justify-content-center">
<ul>
<a class="d-inline-flex" href="#"><img src="images/icons8-spotify#2x.png" width="63" height="63" alt="Spotify"/></a>
<a class="d-inline-flex" href="#"><img src="images/icons8-browse-podcasts-96#2x.png" width="63" height="63" alt="Apple Podcast"/></a>
<a class="d-inline-flex" href="#"><img src="images/google_podcast_icon_135536#2x.png" width="63" height="63" alt="Google Podcast"/></a>
<a class="d-inline-flex" href="#"><img src="images/ivoox#2x.png" width="63" height="63" alt="iVoox"/></a>
</ul>
</div>
</section>
<blog>
<p class="titulo d-flex justify-content-center">BLOG LIBERTARIO</p>
<div id="blog">
<a><img src="images/Prometheus Justin Kendall's Prometheus -1.png" width="678" height="637" alt=""/></a>
<a><img src="images/superficialidad iceberg.png" width="687" height="319" alt=""/></a>
<a><img src="images/observacion de la realidad binoculars#2x.png" width="343.5" height="300" alt=""/></a>
<a><img src="images/Lo que una amiga...L-1.png" width="343.5" height="300" alt=""/></a>
</div>
</blog>
</body>
<footer></footer>
</html>
There is a gap between the nav bar and the HTML element below the nav bar in IE11. The styles work on Safari and Chrome. Is only on IE that it doesn't.
As you can see from the image above that a couple of pixels is added to the padding between the nav and the element below. I'm working with Sass and Tailwind. I can't find where this issue is coming from.
<div class="js-text-controller-options c-text-controller__options hidden" id="text-controls">
<div class='c-text-controller__languages'>
{% do action('icl_language_selector') %}
</div>
<div class="c-text-controller__sizer">
<em class="c-text-controller__sizer-text">
{{__('Adjust text size', 'accessnyctheme')}}
</em>
<button class="c-text-controller__sizer-btn btn-text js-text-larger">
<svg class="icon icon-ui-plus-circle">
<use xlink:href="#icon-ui-plus-circle"></use>
</svg>
<div class="sr-only">{{__('Larger', 'accessnyctheme')}}</div>
</button>
<button class="c-text-controller__sizer-btn btn-text js-text-smaller">
<svg class="icon icon-ui-minus-circle">
<use xlink:href="#icon-ui-minus-circle"></use>
</svg>
<div class="sr-only">{{__('Smaller', 'accessnyctheme')}}</div>
</button>
</div>
</div>
</div>
</div>
<nav class="o-navigation color-dark-background">
<div class="logo-access">
<a href="{{ urlBase }}/">
<svg class="icon icon-logo-full">
<use xlink:href="#icon-logo-full"></use>
</svg><span class="sr-only">{{__('Access NYC', 'accessnyctheme')}}</span>
</a>
</div>
<nav class="o-navigation__nav nav-inline print:hidden" data-js="site-desktop-nav">{% spaceless %}
<a class="screen-desktop:hidden" href="#o-mobile-nav" data-js="toggle-nav">
{{__('Menu', 'accessnyctheme')}}
</a>
{% include 'partials/nav.twig' with {this: {style: 'hidden screen-desktop:inline-block'}} %}
<a class="td-inherit js-toggle-search" href="#search">
<svg class="icon icon-ui-search">
<use xlink:href="#icon-ui-search"></use>
</svg>
{{__('Search', 'accessnyctheme')}}
</a>
{% endspaceless %}</nav>
</nav>
<div class="o-mobile-nav color-mid-background print:hidden" id="o-mobile-nav">
<a class="o-mobile-nav__close" href="#o-mobile-nav" data-js="toggle-nav">
{{__('close & return to site', 'accessnyctheme')}}
<svg class="icon icon-ui-x">
<use xlink:href="#icon-ui-x"></use>
</svg>
</a>
<div class="o-mobile-nav__inner">
<h4 class="o-mobile-nav__header">
{{__('Get help now', 'accessnyctheme')}}
</h4>
<nav class="nav-block">
{% include 'partials/nav.twig' %}
<a href="{{ urlBase }}/?s=">
<svg class="icon icon-ui-search">
<use xlink:href="#icon-ui-search"></use>
</svg>{{__('Search', 'accessnyctheme')}}
</a>
</nav>
</div>
</div>
<div class="o-search-box js-search-box print:hidden" id="search" aria-hidden="true">
<div class="o-search-box__inner">
<div class="usa-grid">
<div class="usa-width-one-whole">
<a class="o-search-box__close js-hide-search" href="#content">
<svg class="icon icon-ui-x">
<use xlink:href="#icon-ui-x"></use>
</svg><span class="sr-only">{{__('Close search', 'accessnyctheme')}}</span>
</a>
This is the HTML base.twig template. Here is the styles for the navigation bar.
/**
* Nav
*/
// Dependencies
#import 'config/fonts';
#import 'config/colors';
#import 'config/typography';
#import 'config/media';
#import 'config/direction';
#import 'config/dimensions';
// Declarations
#mixin nav-icon {
svg {
text-decoration: none;
}
.icon {
margin-#{$text-direction-end}: .3em;
vertical-align: middle;
margin-top: -2px
}
}
.nav-inline {
#include typography-nav();
list-style: none;
text-align: $text-direction-end;
flex: 1 1 auto;
margin: 0;
padding: 0;
a {
display: inline-block;
margin-#{$text-direction-start}: 1em;
}
.active {
font-weight: $font-weight-bold;
}
#include nav-icon;
}
.nav-block {
#include typography-nav();
list-style: none;
margin: 0;
padding: 0;
a {
display: block;
border-bottom: 1px solid $color-grey-dark;
padding: $spacing-base 0
}
.active {
font-weight: $font-weight-bold;
}
#include nav-icon;
}
My educated guess that it has to be with an issue regarding display tag but can't seem to find where the issue lays. This is how it looks in chrome which is the desire state. Here is a JS fiddle with the base html template and some of the styles. Because of the size of the project it is very difficult to upload all the styles.
https://jsfiddle.net/ky950382/2/
My question is quite simple. I made an .inactive class with no pointer-events.
I actually want to show that Prohibid symbol from glyphicon or whatever in red.
How can I achive this?
.inactive {
color: #ccc;
pointer-events: none;
cursor: default;
}
.nav-tabs > li {
background: #000;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">INACTIVE</li>
</ul>
You could add as the content of the after pseudoelement the U+233D symbol ( ⌽) rotated by 90 degrees
.inactive::after {
content: "\233D";
display: inline-block;
color: #D02124;
margin-left: .5em;
font-size: 1.5rem;
transform: rotateZ(90deg);
}
To change cursor on inacticve tab use red svg with icon on li element by adding this to css
li {
cursor: url("data:image/svg+xml;utf8, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto;
}
li {
cursor: url("data:image/svg+xml;utf8, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto;
}
.inactive {
color: #ccc;
pointer-events: none;
cursor: default;
}
.nav-tabs > li {
background: #000;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation" >INACTIVE</li>
</ul>
To generate svg from font go to http://fontello.com/ choose one icon and click on red upper button "Download webfont". Then unzip file and go to https://icomoon.io/app and click "Import icons" (button) and upload .svg file from that zip and select your icon and click (on page bottom) on "Generate svg and more". Then copy body of that svg file change/add proper size/ style (fill: red) inside it - and paste it to following script to get valid css url code:
let str = document.querySelector('.svgData').innerHTML;
let r = str
.replace('width="256" height="256" ', "")
.replace(/> +/g, ">")
.replace(/ +</g, "<")
.replace(/>/g, "%3E")
.replace(/</g, "%3C")
.replace(/>/g, "%3E")
.replace(/#/g, "%23")
.replace(/"/g, "'")
.replace(/ +/g, " ")
.replace(/^ +/g, "")
.split("\n")
.join("");
msg.innerHTML = `<pre>cursor: url("data:image/svg+xml;utf8,${r}");</pre><br>length: ${r.length} char`
<div style="display:flex">
<!-- PASTE you svg file inside div below -->
<div class="svgData">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 31 32">
<title>block</title>
<path style="fill: red" d="M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z"></path>
</svg>
</div>
</div>
<div id="msg"></div>