CSS navbar dropdown isn't working? - javascript

I'm trying to code dropdown menus for Bulma's navigation bar, but it seems to be having issues right now, can anyone help me find out why?
<nav class="nav has-shadow">
<div class="container">
<div class="nav-left">
<a class="navbar-item is-tab is-active" href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Activity</a>
<div class="navbar-item has-dropdown is-hoverable" style="margin-left: auto; display: inline-flex;">
<a class="navbar-link"><i class="fa fa-user"></i> Dave Fox</a>
<div class="navbar-dropdown" style="left: initial; right: 0;">
<div class="navbar-item">
<div>
<small>Account Settings - Language</small>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
Here are my JS files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://holorp.com/assets/bulma/0.5.0/js/bulma.js"></script>
<script src="https://holorp.com/assets/holorp/2.1/js/holorp.js"></script>
and then I'm just using the default Bulma CSS


Have you tried this JavaScript?
I use this:
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Hover your mouse below the text below</p>
<div class="dropdown">
<span>Here!</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>

Related

Javascript stopped working after switching to another display [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Each time I change displays within one HTML file JS stops working (I've tried to replace HTML onclick call with JS function, but it's still the same)
UPD: Sorry for bad explanation. The problem is that if I move from the main display of this site by clicking links on nav panel (e.g. from #main to #contacts or #cart) JS script stops responding on burger icon click (clicking on burger nav panel for screen max-width of 800px doing nothing)
Code:
const burger = document.querySelector('.burger i');
const nav = document.querySelector('.nav');
function toggleNav() {
burger.classList.toggle('fa-bars');
burger.classList.toggle('fa-times');
nav.classList.toggle('nav-active');
}
burger.addEventListener('click', function() {
toggleNav();
});
html,
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: #ffffff;
color: #343434;
border-bottom: 1px solid #343434;
border-top: 1px solid #343434;
}
.logo {
letter-spacing: 3px;
}
.nav {
display: flex;
justify-content: space-around;
width: 30%;
}
.navlink {
list-style: none;
margin: 0;
}
.navlink a {
color: #343434;
text-decoration: none;
font-size: 1.2em;
}
.burger {
font-size: 1.2em;
display: none;
}
#media screen and (max-width: 800px) {
.burger {
display: block;
}
.nav {
margin: 0;
background: #ffffff;
position: absolute;
right: -100%;
top: 70px;
width: 50%;
height: calc(100% - 70px);
flex-direction: column;
justify-content: space-around;
padding: 0;
transition: all 400ms;
}
.navlink {
text-align: center;
}
.nav-active {
right: 0;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="./site.css">
<script src="site.js" type="javascript"></script>
<title>Атлас</title>
</head>
<body>
<div id="main" style="display:block">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('main').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="contacts" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('contacts').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="delivery" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('about').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="cart" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('cart').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
<script src="./site.js"></script>
</header>
</div>
<div id="payment" style="display:none">
</div>
<script src="./site.js"></script>
</body>
</html>

The problem is that you have several .burger in your HTML and you only define a Javascript event for the very first one. You could remedy this via:
const burgers = document.querySelectorAll('.burger i');
and
for (let burger of burgers) {
//define your event
}
but it's not the best approach. The very best thing that you could do is to refactor your HTML and have a single item with the .burger class, but with more reliable event.

Html button border line remove outline on hover after click

I have an HTML button and I can't get the border to go away. I've tried border:none; along with on each of the clickable behaviors that it's managed. So on active, hover and focus adding outline: none; and border-line: none all still putting a black line around a button that is on an orange background image.
.gsbutton {
position: absolute;
float: left;
margin: -10px 183px;
align-items: right;
width: 135px;
height: 50px;
text-decoration: none;
display: inline-block;
background-image: url(https://i.stack.imgur.com/s5K46.png);
z-index: -1;
}
button[type="reset"]:focus, active, hover {
outline: none;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet" type="text/css" href="attributes.css">
</head>
<body>
<!-- page bar header navigation tabs -->
<div class="head_bg">
<div class="wrap">
<div class="logo">
<a href="index.html">
<img src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/logo.svg"></img>
</a>
</div>
<nav class="nav_menu">
<a class="active" href="index.html">Home</a>
<a class="active" id="pricingheader" href="pricing.html"> Pricing</a>
<a class="active" href="product.html" > Products</a>
<a class="active" href="about.html"> About Us</a>
<a class="active" href="community.html"> Community</a>
</nav>
</div>
<button class="gsbutton"></button>
</div>
<div class="main">
<div class="container">
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
<h1 class="promo_slogan"> Bring everyone together to build better products.</h1>
<p></p>
</div>
<div class="mycolumn" id="content"><img src="">
</div>
</div>
</div>
</div>

you are not having button type as "reset", so this will not work. add border: none to button class that is .gsbutton
After the above change there is one more problem in your code, you are using "Position" : "absolute" , that is not needed at all. So you have to remove that. Because of this hover is not getting triggered.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.gsbutton {
float: left;
margin: -10px 183px;
width: 135px;
height: 50px;
text-decoration: none;
display: inline-block;
background-image: url(https://i.stack.imgur.com/s5K46.png);
z-index: -1;
}
.gsbutton:hover {
border : none;
}
</style>
</head>
<body>
<div class="head_bg">
<div class="wrap">
<div class="logo">
<a href="index.html">
<img src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/logo.svg"></img>
</a>
</div>
<nav class="nav_menu">
<a class="active" href="index.html">Home</a>
<a class="active" id="pricingheader" href="pricing.html"> Pricing</a>
<a class="active" href="product.html" > Products</a>
<a class="active" href="about.html"> About Us</a>
<a class="active" href="community.html"> Community</a>
</nav>
</div>
<button class="gsbutton"></button>
</div>
<div class="main">
<div class="container">
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
<h1 class="promo_slogan"> Bring everyone together to build better products.</h1>
<p></p>
</div>
<div class="mycolumn" id="content"><img src="">
</div>
</div>
</div>
</div>
</body>
</html>

try this
button[type="reset"]:focus, button[type="reset"]:active, button[type="reset"]:hover {
outline: none;
border: none;
}

Make bs4 navbar in content box

So i have problem with bs4 navbar so lets explain more about the problem:
I have page with content box that have container and i want above of it to put the navbar i want to make somethink like this
But when i try to make it happend that:
So here is my html file
<title> {{ $title }} </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css"/>
<body class="scrollbar-inner">
<div id="particles-js"></div>
#if(!Auth::user())
<script type="text/javascript">
$(window).on('load', function () {
$('#userLogin').modal('show');
});
</script>
#include('modals.login')
#endif
<div class="servername">
{{ $heading }}
</div>
<h1 class="ip" onclick="CopyToClipboard('to-copy')">
<div id="to-copy">{{ $main_ip }} <b class="fa fa-copy"></b></div>
</h1>
<div class="content-box">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<div class="maincontent-box">
</div>
<div class="sidebar">
#if(Auth::user())
<div class="dropdown userPane">
<button style="color:#000000; width: 111%; background: #D3D3D3" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<img src="http://cravatar.eu/head/{{ Auth::user()->username}}/128.png" width="32px;"
height="32px;"/> {{ Auth::user()->username }}
</button>
<div class="dropdown-menu" style="width: 111%">
<a class="dropdown-item">
<center>
<img src="http://cravatar.eu/head/{{ Auth::user()->username }}/128.png" width="32px;"
height="32px;"/>
</center>
</a>
<div class="dropdown-item">
<center>
Репутация: <span
class="badge badge-{{ Auth::user()->reputation == 10 ? 'success' : 'danger' }}">{{ Auth::user()->reputation }}
/10</span>
</center>
</div>
<div class="dropdown-item">
<center>В сървъра ли си?: <b>{{ Auth::user()->isLogged == 1 ? 'Да' : 'Не' }}</b></center>
</div>
<hr/>
<a class="dropdown-item" href="{{ url('/account/password') }}">
Смени парола
</a>
<a class="dropdown-item" href="#">
Нотификаций: <span class="badge badge-danger">5</span>
</a>
<a class="dropdown-item" href="#">
ични съобщения: <span class="badge badge-danger">5</span>
</a>
<a class="dropdown-item" href="{{ url('/logout') }}">
<center>Излез</center>
</a>
</div>
</div>
#endif
<div class="side">
<h5 class="boxes-title">Навигация <b class="fa fa-compass"></b></h5>
<div class="card">
<div class="card-body">
<a href="{{ url('/') }}" class="{{ request()->is('/') ? 'active' : '' }}"><b
class="fa fa-home"></b>
Начало</a>
<br>
<a href="{{ url('/shop') }}" class="{{ request()->is('shop') ? 'active' : '' }}"><b
class="fa fa-shopping-cart"></b> Магазин</a>
<br>
<a href="{{ url('/bans') }}" class="{{ request()->is('bans') ? 'active' : '' }}"><b
class="fa fa-gavel"></b> Банлист</a>
<br>
<a href="{{ url('/support') }}" class="{{ request()->is('support') ? 'active' : '' }}"><b
class="fa fa-question"></b> Поддръжка</a>
<br>
<a href="{{ url('/apply') }}" class="{{ request()->is('apply') ? 'active' : '' }}"><b
class="fa fa-file-o"></b> Кандидатури</a>
<br>
<a href="{{ url('/top-voters') }}" class="{{ request()->is('top-voters') ? 'active' : '' }}"><b
class="fa fa-thumbs-up"></b> Топ гласуващи</a>
<br>
</div>
</div>
</div>
<div class="side">
<iframe style="width: 300px;"
src="https://discordapp.com/widget?id=511173991168344069&theme=dark" width="350" height="500"
allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</div>
<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="{{ asset('js/application.js') }}"></script>
</body>
</html>
My css file:
body {
font-family: 'Oswald', sans-serif;
background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a {
color: rgba(0, 0, 0, 0.77);
}
a:hover {
color: #ffbd13;
}
.servername {
color: white;
text-align: center;
text-decoration: none;
font-size: 100px;
display: flex;
margin-top: 40px;
justify-content: center;
}
.ip {
color: white;
text-align: center;
text-decoration: none;
font-size: 24px;
margin-bottom: 50px;
justify-content: center;
}
#to-copy:hover {
cursor: pointer;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0px;
z-index: -1;
left: 0px;
background-image: url('');
background-position: 50% 50%;
background-repeat: no-repeat;
}
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
max-width: 80rem;
margin: 0 auto;
background: white;
margin-bottom: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.active {
color: #ffbd13;
}
.news-box {
background-color: lightgrey;
width: 90%;
padding: 15px;
margin: 30px;
}
.maincontent-box {
background-color: lightgrey;
width: 90%;
padding: 15px;
margin-top: 6.6rem;
margin-left: 30px;
margin-bottom: 30px;
}
.boxes-title {
padding-bottom: 5px;
}
.sidebar {
width: 90%; /*Changed*/
bottom: 520px;
margin: 30px;
}
.side {
padding: 15px;
bottom: 520px;
margin-bottom: 10px;
background-color: lightgrey;
}
#media only screen and (min-width: 768px) {
.sidebar {
width: 30%;
}
.news-box {
width: 100%;
}
.maincontent-box {
width: 100%;
}
.content-box {
flex-direction: row;
}
}
.userPane {
margin-bottom: 30px;
top: 0;
color: white;
right: 0;
width: 80%;
justify-content: center;
}
#media only screen and (min-width: 768px) {
.userPane {
width: 90%;
}
}
Please help me guys.. im trying to make it maybe 30 minutes without succedd! Thanks in advice!

hmm, maybe try with something like this :
<div class="content-box">
<div class="navbar_position" >
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
</div>
<div class="maincontent-box">
</div>
style:
#media only screen and (min-width: 768px) {
.sidebar {
width: 30%;
}
.navbar_position{
position: absolute;
width: 90%;
}
.news-box {
width: 100%;
}
.maincontent-box {
width: 100%;
}
.content-box {
flex-direction: row;
}
}
plunker: http://plnkr.co/edit/uJKmTlYZtSgRDSqGk27W?p=preview

Make sure you do like this
<html>
<head>
<!-- bootstrap css here -->
<!-- https://getbootstrap.com/docs/4.1/getting-started/introduction/ -->
</head>
<body>
<div class="container">
<nav>
<!-- This is inside container because the header is on the left side container only. -->
<!-- nav src here: https://getbootstrap.com/docs/4.1/components/navs/ -->
</nav>
<!-- main content here -->
</div>
<div class="sidebar">
<!-- main content -->
</div>
<!-- bootstrap js here -->
<!-- https://getbootstrap.com/docs/4.1/getting-started/introduction/ -->
</body>
</html>
I hope that this will give you an idea.

Open one div at a time and close all others which are opened jquery

Trying to implement a show/hide description box.
If the user clicks on the first showDesc link it opens it's description box.
Then if the user clicks the second showDesc link it opens it's description box and should close all the others which are opened.
it below :
Below is my code:
$(".showDesc").click(function () {
$(".descContainer").toggleClass("show");
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>

Your issue is because you're changing the class on all the .descContainer elements at once, not just the one related to the clicked .showDesc.
To fix this you need to use DOM traversal to get the closest('.feedContainer) then next() to get the element you want to toggle, like this:
$(".showDesc").click(function() {
var $target = $(this).closest('.feedContainer').next(".descContainer").toggleClass("show");
$(".descContainer").not($target).removeClass('show'); // hide other open elements
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>

You don't need jQuery for that, you don't even need javascript for that. Setting ids and internals links on your HTML + using the :target CSS pseudo-class will do.
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
line-height: 24px;
display:none;
}
.descContainer:target {
display:block;
}
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#1">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="1">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#2">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="2">
<div>Description Text</div>
</div>
</article>
</section>
</main>

How to prevent bootstrap navbar buttons from stacking

I'm trying to design a responsive page.
This is how it looks like in a wide browser.
It changes to the ff. when I make it narrow:
What I want to happen is this:
This is my code for it:
/**For Eample Only So the Icons are Visible*/
.navbar-ct-blue {
background: #1B96BF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-piggy" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-cash" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-wallet" style="color: white;"></i>
</a>
</li>
</ul>
</div>
<!-- /.container-fluid -->
</nav>
I have looked at these links, but I couldn't find the answer. Please help.
How to prevent Bootstrap navbar from displaying in multiple lines without collapsing them into an icon
How to prevent a bootstrap navbar from collapsing when window resizing
Centering navbar buttons in bootstrap

You're seeing this happen since the nav-justified class only uses display:table-cell above 768px:
#media (min-width:768px) {
.nav-justified > li {
display: table-cell;
width: 1%
}
Here are two examples that solve this:
Using nav-justified:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>
<a href="#">
<span class="pe-7s-piggy"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-cash"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-wallet"></span>
</a>
</li>
</ul>
</div>
</nav>
Using the Grid:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
margin: 0;
}
.navbar.navbar-ct-blue .nav-row span {
color: white;
padding: 20px 0;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-row span:hover {
color: #00F2FF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-bottom navbar-ct-blue" role="navigation">
<div class="container">
<div class="row nav-row text-center">
<div class="col-xs-4">
<span class="pe-7s-piggy"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-cash"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-wallet"></span>
</div>
</div>
</div>
</nav>

To give the <li class="navbar-nav"> is obviously wrong. Removing that could fix it. Additionally, as Tasos said inline-block for the list item should do it. Sure, look in the corresponding media query.

Categories

Resources