Skip to content

Instantly share code, notes, and snippets.

@ridgey28 ridgey28/index.html
Last active Jun 1, 2019

Embed
What would you like to do?
Bulma Full Width Desktop Navbar Flex
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" alt="Logo" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-center"> <!-- Here I have created the navbar-center class -->
<a class="navbar-item">Articles</a>
<a class="navbar-item">Projects</a>
<a class="navbar-item">Contact</a>
<a class="navbar-item">About</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"><i class="fas fa-search"></i>Topics</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<a class="navbar-item">Jobs</a>
<a class="navbar-item">Contact</a>
<hr class="navbar-divider">
<a class="navbar-item">Report an issue</a>
</div>
</div>
</div>
</div>
</nav>
@media screen and (min-width: 1088px){
.navbar-center {
display:flex;
justify-content: stretch;
align-items: stretch;
flex-grow: 1;
flex-shrink: 0;
flex-direction: row;
}
.navbar-link,.navbar-item {
align-items: center;
display: flex;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 0;
justify-content: center;
}
.navbar-dropdown .navbar-item {
justify-content:left;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.