I'm creating a menu using Bulma CSS. I have the following logo:
And I would like to use it much like the Atlantic did, in the center of the page. However, I'm not sure how; I've tried margin-auto:0, but that didn't work out. I also tried messing with the margins, and flexbox and inline-block, but to no avail. Any help is appreciated.
Here is the page thus far (on Codepen): https://codepen.io/Refath/full/ZEQzOQX
Additional Information: The Navbar is currently using one of Bulma's Components, as follows in the snippet below:
<nav class="navbar" role="navigation" aria-label="main navigation">
<form id="demo-2">
<input type="search" placeholder="Search">
</form>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Math
</a>
<a class="navbar-item">
Science
</a>
<a class="navbar-item">
Politics
</a>
<a class="navbar-item">
Economics
</a>
<a class="navbar-item">
Education
</a>
<a class="navbar-item">
Literature
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</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 class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
</div>
</div>
</div>
</div>
</nav>
Use margin: 0 auto; or margin: auto;
It will work like this,
margin: auto; will be margin automatic from all four sides, and in case of
margin: 0 auto;. it will be 0 from top and bottom and auto from left and right.
Related
I am a beginner and use Bulma CSS and try to make a side menu by default CSS. Everything seems to be simple, but my content in the column is cut and has the wrong width.
`
<div class="columns is-fullheight" style="background-color: lightgrey;">
<aside class="column is-2 section is-narrow-mobile is-hidden-mobile is-fullheight" style="background-color: lightblue;">
<div class="menu">
<p class="menu-label is-hidden-touch">Navigation</p>
<ul class="menu-list">
<li>
<a href="#" class="">
<span class="icon"><i class="fa fa-home"></i></span> Home
</a>
</li>
<li>
<a href="#" class="is-active">
<span class="icon"><i class="fa fa-table"></i></span> Links
</a>
<ul>
<li>
<a href="#">
<span class="icon is-small"><i class="fa fa-link"></i></span> Link1
</a>
</li>
</ul>
</li>
</ul>
</div>
</aside>
</div>
`
Result
If I remove class "columns" I did size what I want
So, what I do incorrect?
So I have the below code that will render a mega menu for me using the Bulma Framework, but I'm running into issues on having it position center underneath.
Please note: Please click "Run code" and then expand to full page to see what I mean, the mobile version doesn't show it.
The code that I have renders the mega menus as such:
I want to have the hoverable menu item be centered with the mega menu (Meaning have the middle "Sub Menu Title" be right below the blog hover dropdown.
There is a min-width: 50% set on the .navbar-dropdown class.
All help would be appreciated.
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io">
<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenubd-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenubd-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home1
</a>
<a class="navbar-item">
Home2
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<div class="navbar-item has-dropdown is-hoverable is-mega">
<div class="navbar-link flex">
Blog <span class="tag is-info ml-2">Hover here<span>
</div>
<div id="blogDropdown" class="navbar-dropdown " style="min-width: 50%" data-style="width: 18rem;">
<div class="container is-fluid">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item " href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
Columns
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item " href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item " href="http://bulma.io/documentation/layout/container/">
Layout
</a>
</div>
</div>
</div>
<hr class="navbar-divider">
<div class="navbar-item">
<div class="navbar-content">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<strong>Stay up to date!</strong>
</div>
</div>
<div class="level-right">
<div class="level-item">
<a class="button bd-is-rss is-small" href="http://bulma.io/atom.xml">
<span class="icon is-small">
<i class="fa fa-rss"></i>
</span>
<span>Subscribe</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="navbar-item">
Home
</a>
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fa fa-twitter"></i>
</span>
</a>
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io&via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
Currently in bulma.min.css .navbar-dropdown has:
position: absolute;
left: 0;
Thus you could add those 2 lines to do the trick:
left: 50%; // will position it at 50% of its relative parent (the .navbar)
transform: translateX(-50%); // will translate it 50% of its own width to the left
I m using Clarity Design System with angular and the top menu is not mobile response
<header class="header-2">
<div class="branding">
<a class="nav-link">
<clr-icon shape="home" size="24"></clr-icon>
<span class="title">title</span>
</a>
</div>
<div class="header-nav">
<a class="nav-link nav-text" routerLink="/home">Home</a>
<a class="active nav-link nav-text"
routerLink="/login">Login</a>
</div>
</header>
I m expecting the top menu to turn into few lines (button) when the width is reduce
Or should I use different tags ?
To use responsive navigation, see the documentation on it at https://v2.clarity.design/navigation. You need to use the clr-main-container and clr-header elements to enable this behavior.
Given your markup, it should be something like the following.
<clr-main-container>
<clr-header class="header-2">
<div class="branding">
<a class="nav-link">
<clr-icon shape="home" size="24"></clr-icon>
<span class="title">title</span>
</a>
</div>
<div class="header-nav" [clr-nav-level]="1">
<a class="nav-link nav-text" routerLink="/home">Home</a>
<a class="active nav-link nav-text" routerLink="/login">Login</a>
</div>
</clr-header>
<div class="content-container">
<main class="content-area">
... the main body content goes here, probably a router-outlet
</main>
<nav class="sidenav" [clr-nav-level]="2">
... if you want a sidenav that is, or omit this
</nav>
</div>
</clr-main-container>
Yes it is working perfect now, it solved the behavior
So now is:
<clr-main-container>
<clr-header class="header-2">
<div class="branding">
<a class="nav-link">
<clr-icon shape="home" size="24"></clr-icon>
<span class="title">{{title}}</span>
</a>
</div>
<div class="header-nav" [clr-nav-level]="1">
<div class="header-nav">
<a class="nav-link nav-text" routerLink="/home">Home</a>
<a class="active nav-link nav-text" routerLink="/login">Login</a>
</div>
</div>
</clr-header>
Thank you very much
I'm trying to implement this mobile layout using the Bulma CSS Framework (the red header and the blue footer are both fixed) :
Here is the corresponding code :
<nav class="navbar is-danger is-fixed-top" role="navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.php">
<img src="http://via.placeholder.com/28x28" width="28" height="28">
</a>
<div class="navbar-burger burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
<div class="navbar-brand">
<a class="navbar-item is-expanded">
<i class="fa fa-user"></i>
<p class="is-size-7">Account</p>
</a>
<a class="navbar-item is-expanded">
<i class="fa fa-list"></i>
<p class="is-size-7">Tasks</p>
</a>
<a class="navbar-item is-expanded">
<i class="fa fa-flag"></i>
<p class="is-size-7">Alerts</p>
</a>
<a class="navbar-item is-expanded">
<i class="fa fa-cog"></i>
<p class="is-size-7">Settings</p>
</a>
</div>
</nav>
<div class="section">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
Header : is there a way to display a left side burger, a
centered logo and a right side icon ?
Footer : is there a class to display icons and text on top of each other instead of side by side ?
Is this mockup achievable out of the box ? I do not mind doing it manually in CSS but since this mobile layout seems pretty common I was hoping that there would be a natural way to do it.
Is this mockup achievable out of the box?
Yes and No.
You will need to do a small bit of HTML restructuring and add a few lines of CSS to move the burger to the left side.
The layout for the footer can be achieved using Bulma modifier classes.
fiddle
Solution
Header
<div class="navbar-brand">
<div class="navbar-burger burger">
<span></span>
<span></span>
<span></span>
</div>
<a class="navbar-item" href="index.php">
<img src="...">
</a>
</div>
Switch the order of elements in .navbar-brand - The burger comes first, the logo second.
Add the following CSS
.navbar-burger {
margin-left: 0;
margin-right: auto;
}
Footer
Add the .is-block and has-text-centered modifying classes to .navbar-item:
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-user"></i>
<p class="is-size-7">Account</p>
</a>
For more info, see here and here
Snippet
js added to make menu functional in demo
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function($el) {
$el.addEventListener('click', function() {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
.navbar-burger {
margin-left: 0 !important;
margin-right: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar is-danger is-fixed-top" role="navigation">
<div class="navbar-brand">
<div class="navbar-burger burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
<a class="navbar-item" href="index.php">
<img src="https://via.placeholder.com/28x28" width="28" height="28">
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item">Example 1</a>
<a class="navbar-item">Example 2</a>
<a class="navbar-item">Example 3</a>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
<div class="navbar-brand">
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-user"></i>
<p class="is-size-7">Account</p>
</a>
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-list"></i>
<p class="is-size-7">Tasks</p>
</a>
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-flag"></i>
<p class="is-size-7">Alerts</p>
</a>
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-cog"></i>
<p class="is-size-7">Settings</p>
</a>
</div>
</nav>
<div class="section">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
I am using Bootstrap latest version and trying to center align contents in a span and section but nothing seems to work.
Here is my markup:
<div class="container body-content">
<ul id="CategoryMenu" class="list-inline">
<li>
<a href="/Category/Cars">
Cars
</a>
</li>
<li>
<a href="/Category/Buses">
Buses
</a>
</li>
</ul>
<hr>
<section>
<div class="gallery center-block">
<hgroup>
<h2>Products</h2>
</hgroup>
<div class="categories row">
<ul id="da-thumbs" class="da-thumbs">
<div id="MainContent_productList_ctrl0_itemPlaceholderContainer">
<li>
<a href="/Product/Convertible%20Car">
<img src="/Catalog/Images/Thumbs/carconvert.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Convertible%20Car">
Convertible Car
</a>
</div>
</li>
<li>
<a href="/Product/Old-time%20Car">
<img src="/Catalog/Images/Thumbs/carearly.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Old-time%20Car">
Old-time Car
</a>
</div>
</li>
<li>
<a href="/Product/Fast%20Car">
<img src="/Catalog/Images/Thumbs/carfast.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Fast%20Car">
Fast Car
</a>
</div>
</li>
<li>
<a href="/Product/Super%20Fast%20Car">
<img src="/Catalog/Images/Thumbs/carfaster.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Super%20Fast%20Car">
Super Fast Car
</a>
</div>
</li>
<li>
<a href="/Product/Old%20Style%20Racer">
<img src="/Catalog/Images/Thumbs/carracer.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Old%20Style%20Racer">
Old Style Racer
</a>
</div>
</li>
<li>
<a href="/Product/Ace%20Plane">
<img src="/Catalog/Images/Thumbs/planeace.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Ace%20Plane">
Ace Plane
</a>
</div>
</li>
</div>
</ul>
</div>
<span id="MainContent_it" class="btn-group btn-group-sm text-center">
<a class="customDisabledClassName btn btn-default">|<</a>
<a class="customDisabledClassName btn btn-default"><</a>
<span class="btn btn-primary disabled">1</span>
<a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl01$ctl01','')">2</a>
<a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl01$ctl02','')">3</a>
<a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl02$ctl00','')">></a>
<a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl02$ctl01','')">>|</a>
</span>
</div>
</section>
</div>
Basically I want that the images in the div gallery should be centered horizontally. So I added center-block and used the following CSS:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
I also want to center align elements inside the <span> called 'MainContent_it' and I added the same center-block to it too, but nothing seems to work.
What else do I do?
IWantToLearn, Hi there. Is this what you are wanting to align.
Have a look at the Fiddle.
.center-this-block {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
Your code is not so much clear but just on a guess
.center-block
{
width: 600px;
margin: 0 auto;
}
give width to the image if you want margin:0 auto.
You need to define the width of the element you are centering, not the parent element.
Apply the above class to the elements that you want to center.
Have a look at the link Why can't I center with margin: 0 auto?