I have a Bulma Navbar and there is too much elements in it which cause it to overflow on the right of the page. Is it possible to make a second line ?
<nav class="is-dark has-background-white">
<div class="navbar-brand is-hidden-desktop">
<div class="navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<span>Text Here</span>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<a class="navbar-item">...</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">...</div>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
Related
When I open bulma dropdown it gets opened on the right and some part is even outside from screen. How can I force it to pen dropdown on the left?
Currently, it looks like this:
So the goal is to open it on the left from the Account item
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-item has-dropdown is-active">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.9.1
</div>
</div>
</div>
</nav>
How can be it solved?
According to the documention about the dropdown component, you can add the is-right class to have a right-aligned dropdown, so the overflow will be on the left side.
It also works on navbar's dropdowns, your code should look like this :
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-item has-dropdown is-active">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown is-right">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.9.1
</div>
</div>
</div>
</nav>
Result :
I'm currently struggling with the bulma navbar. This is my header:
<header class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<span class="icon has-text-primary is-large">
<i class="mdi mdi-36px mdi-hexagon-multiple"></i>
</span>
<!-- <h1 class="title is-1">DNW</h1> -->
</a>
<span class="navbar-burger burger" data-target="navbarMenuHeroC">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Forum
</a>
<a class="navbar-item">
Spiele
</a>
<div class="navbar-item has-dropdown is-hoverable is-arrowless">
<div class="navbar-link">
<img class="nav-profilepic" src="https://static.wixstatic.com/media/1bfda4_6f8ae00a346644a89245f331fc6c6b8e~mv2_d_3476_5214_s_4_2.jpeg?dn=">
Tränenreich
</div>
<div class="navbar-dropdown">
<a class="navbar-item">
Profil
</a>
<a class="navbar-item">
Nachrichten
</a>
<a class="navbar-item">
Rangliste
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Hilfe
</a>
<a class="navbar-item">
Einstellungen
</a>
<a class="navbar-item">
Mod-Forum
</a>
</div>
</div>
</div>
</div>
</div>
</header>
The dropdown menu should show a blue arrow. But it doesn't show in Chrome nor in Firefox. Any ideas how to fix this?
I'd expect the output to show a dropdown arrow on the right next to "Tränenreich". Hovering works perfectly fine.
Greetings
Your code combined with an unedited Bulma file is showing an arrow next to the dropdown item. See demo below (you'll have to see full page perhaps because nav is changed to hamburger menu from tablet down).
My guess is either you've edited the Bulma CSS in a way that is breaking the arrow OR you have some custom CSS that is conflicting with it.
The arrow is created using a :after pseudo element.
.navbar-link:not(.is-arrowless)::after,
.select:not(.is-multiple):not(.is-loading)::after {
border: 3px solid transparent;
border-radius: 2px;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: .625em;
margin-top: -.4375em;
pointer-events: none;
position: absolute;
top: 50%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: center;
transform-origin: center;
width: .625em;
}
Check your custom CSS to see if you have anything that is styling :after elements that is affecting the nav-item.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<header class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<span class="icon has-text-primary is-large">
<i class="mdi mdi-36px mdi-hexagon-multiple"></i>
</span>
<!-- <h1 class="title is-1">DNW</h1> -->
</a>
<span class="navbar-burger burger" data-target="navbarMenuHeroC">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Forum
</a>
<a class="navbar-item">
Spiele
</a>
<div class="navbar-item has-dropdown is-hoverable is-arrowless">
<div class="navbar-link">
<img class="nav-profilepic" src="https://static.wixstatic.com/media/1bfda4_6f8ae00a346644a89245f331fc6c6b8e~mv2_d_3476_5214_s_4_2.jpeg?dn=">
Tränenreich
</div>
<div class="navbar-dropdown">
<a class="navbar-item">
Profil
</a>
<a class="navbar-item">
Nachrichten
</a>
<a class="navbar-item">
Rangliste
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Hilfe
</a>
<a class="navbar-item">
Einstellungen
</a>
<a class="navbar-item">
Mod-Forum
</a>
</div>
</div>
</div>
</div>
</div>
</header>
Basically, I have a site that has a sticky header and sidebar nav but when the screen is made smaller, the menu adopts a hamburger button that can expand the collapsible sidebar.
This works as expected except for one thing: The inclusion of the bootstrap CSS cdn.
So If I comment out the CDN for the bootstrap CSS it works correctly, but If I include it and make the screen mobile size, upon hitting the menu button, the menu expands under the main content cards in the main div. If I comment it out, the menu expands on top of the cards as it should.
IN my codepen above, it has the bootstrap CDN to show the error. I have a custom CSS which is also attached there and I have a lot of styling there, I'm just wondering how I can get this fixed and still have the bootstrap CSS for other stying.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="branding">
<div class="menu-button menu-toggle nav">
<i class="material-icons">menu</i>
</div>
<img src=""/>
</div>
<div class="page-details"></div>
<div class="settings">
<div class="menu-button profile">
<i class="material-icons">person</i>
</div>
<div class="menu-button menu-toggle aside">
<i class="material-icons">chat</i>
</div>
</div>
</header>
<div class="app">
<nav>
<div class="title-block">
<img src=""/>
</div>
<ul>
<li>
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">adb</i>
<span>Menu Item with a Long Name</span></a></li>
<li>
<a href="#">
<i class="material-icons">android</i>
<span>Android</span></a></li>
<li>
<a href="#">
<i class="material-icons">attachment</i>
<span>Attachments</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">bookmark</i>
<span>Bookmarks</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">star</i>
<span>Favorites</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">build</i>
<span>Configuration</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">cake</i>
<span>Birthday Party</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">brush</i>
<span>Designer</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">camera</i>
<span>Photos</span>
</a>
</li>
</ul>
</nav>
<!--These are the cards that the menu expands underneath-->
<article>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</article>
</div>
nav.open {z-index: 1 !important};
Z-index will allow you to show the nav on top of other elements and the !important will help you overwrite the bootstrap css
Adding z-index: 9999; to the nav.open worked.
Ok My Site is freaking done!! I just have to make my menu responsive.... and the hover effects on my site won't allow the links to be responsive so I want to make this a collapse menu but for some reason its not working. I displays properly but once I go to view it on my mobile device it shows the button with the bars in it but it doesn't toggle my menu can you help me figure out what's wrong?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="col-sm-2 col-md-2"></div>
<div class="col-sm-8 col-md-8" style=" border-radius:5px; border-bottom-color:Silver; border:3px; border-top-color: transparent !important; background-color:rgba(0,0,0,.8)">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#homenav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="homenav">
<ul class="nav navbar-nav">
<li><a href="pages/home.html" class="menu_nav demo-4">
<span>
<span>Home</span>
<span>-Home-</span>
<span></span>
</span>
</a></li>
<li> <a href="pages/artist.html" class="menu_nav demo-4">
<span>
<span>Roster</span>
<span>-Roster-</span>
<span></span>
</span>
</a></li>
<li>
<a href="pages/order.html" class="menu_nav demo-4">
<span>
<span>Brands</span>
<span>-Brands-</span>
<span></span>
</span>
</a>
</li> <li>
<a href="pages/music.html" class="menu_nav demo-4">
<span>
<span>Music</span>
<span>-Music-</span>
<span></span>
</span>
</a>
</li>
<li>
<a href="pages/videos.php" class="menu_nav demo-4">
<span>
<span>Videos</span>
<span>-Videos-</span>
<span></span>
</span>
</a> </li>
<li>
<a href="pages/videos.php" class="menu_nav demo-4">
<span>
<span>Store</span>
<span>-Store-</span>
<span></span>
</span>
</a>
</li>
<li>
<a href="pages/services.html" class="menu_nav demo-4">
<span>
<span>Services</span>
<span>-Services-</span>
<span></span>
</span>
</a>
</li>
<li>
<a href="#" class="menu_nav demo-4">
<span>
<span>Resources</span>
<span>-Resources-</span>
<span></span>
</span>
</a> </li>
</ul>
</div>
<div class="col-sm-2 col-md-2"></div>
</div>
</nav>
<!--End Of Navigation-->
I think you are missing javascript files. Include this to your project and it should work.
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
I have the following code:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<ul id="controlsCar" class="entries nav nav-pills nav-justified">
<li data-target="#custom_carousel" data-slide-to="0">
<a href="#">
<span>
<img src="img1.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="1">
<a href="#">
<span>
<img src="img2.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle1</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="2">
<a href="#">
<span>
<img src="img3.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle3</div>
</span>
</a>
</li>
</ul>
</div>
</div>
it resizes perfectly on Safari and Chrome but I do not see any change in the image with using FireFox or IE.
Does it have to do with the SPAN TAG ? Any ideas?
Thanks