I want to put a horizontal icon sepation line on a "material toolbar" but it is always displayed vertically. here is the code :
<mat-toolbar color="primary">
<mat-toolbar-row>
<a> <img src="https://img.icons8.com/material-sharp/96/000000/link.png" class="logo" alt="logo" /></a>
<span class="example-spacer"></span>
<span flex></span>
<div>
<div class="md-toolbar-tools menu">
<a mat-button class="home"> <img
src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
<a class="cp"> <img src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
<a mat-button class="p"> <img
src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
<a mat-button class="cl"> <img
src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
<div class="separation-line"></div>
<a mat-button class="mu"> <img
src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
</div>
</div>
</mat-toolbar-row>
HTML has a built in horizontal rule tag (<hr>). You can learn more about it here.
Related
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 am implementing a website with Meteor + Blaze + Bulma. I've basically created a navigation menu and got the burger button working for small devices. But the problem is, that the position of the burger button is messed up.
I would like to have it on the far right and vertically aligned with the logo. But the burger is right next to the logo and also slightly lower. I've tried "position: absolute; right:0;" but it keeps jumping back.
Is Bulma not suited for use with Blaze and Meteor? I have no other CSS files so far and just added Bulma in the header tags. So what could be the issue?
<template name="navigation">
<nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
<div class="container">
<!-- Logo/Home -->
<div class="navbar-brand">
<a class="" href="{{pathFor route='Home'}}">
<img src="logo.svg" width="200" height="29" />
</a>
<!-- Burger Menu Button -->
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<!-- Navigation Conent -->
<div id="navlist" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{pathFor route='1'}}">
1
</a>
<a class="navbar-item" href="{{pathFor route='2'}}">
2
</a>
<a class="navbar-item" href="{{pathFor route='3'}}">
3
</a>
<a class="navbar-item" href="{{pathFor route='4'}}">
4
</a>
<a class="navbar-item" href="{{pathFor route='5'}}">
5
</a>
</div>
<!-- Navbar social -->
<div class="navbar-end">
<a class="navbar-item icon is-large" href="https://www.meetup.com/...">
<i class="fab fa-lg fa-meetup"></i>
</a>
<a class="navbar-item icon is-large" href="https://www.facebook.com/...">
<i class="fab fa-lg fa-facebook"></i>
</a>
<a class="navbar-item icon is-large" href="https://www.youtube.com/...">
<i class="fab fa-lg fa-youtube"></i>
</a>
</div>
</div>
</div>
</nav>
You need to add the class navbar-item to the container of your logo like that :
<div class="navbar-brand">
<a class="navbar-item" href="{{pathFor route='Home'}}"> <!-- Adding the class navbar-item -->
<img src="logo.svg" width="200" height="29" />
</a>
<!-- Burger Menu Button -->
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
Result on my own project :
Without navbar-item :
With navbar-item :
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.
I developed a toolbar but I can't align elements on the same line, left, center and right.
Does anyone know how I can align these elements?
I notice that the elements with the name Align left are aligned to the left, the align center aligned to the center and the align right aligned to the right.
Thanks
Demo
Code
<mat-sidenav-content fxFlexFill>
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
<mat-icon>menu</mat-icon>
</button>
<div fxShow="true" fxHide.lt-md>
<a href="#" mat-button>Align left</a>
<a href="#" mat-button>Align left</a>
<a href="#" mat-button>Align center</a>
<a href="#" mat-button>Align center</a>
<a href="#" mat-button>Align right</a>
<a href="#" mat-button>Align right</a>
</div>
</mat-toolbar-row>
</mat-toolbar>
css. This expands to occupy max available space.
.flexExpand {
flex: 1 1 auto;
}
in your template use flexExpand utility to separate the items
<mat-toolbar>
<mat-toolbar-row>
<div >
<a mat-button [routerLink]="'/accounts'"> Accounts </a>
<a mat-button [routerLink]="'/create-account'"> Create Account </a>
</div>
<span class="flexExpand"></span>
<div >
<a mat-button [routerLink]="'/logout'"> Logout </a>
</div>
<mat-toolbar-row>
</mat-toolbar>
Are you looking for something like this ?
<div fxShow="true" fxHide.lt-md fxFlex fxLayout>
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<div fxFlex>
<a href="#" mat-button>Align left</a>
<a href="#" mat-button>Align left</a>
</div>
<div fxFlex fxLayoutAlign="center center">
<a href="#" mat-button>Align center</a>
<a href="#" mat-button>Align center</a>
</div>
<div fxFlex fxLayoutAlign="flex-end center">
<a href="#" mat-button>Align right</a>
<a href="#" mat-button>Align right</a>
</div>
</div>
I'm trying to add bootstrap tooltips to some icons on a list, but the tooltip is partially hidden by the row height:
What style do I need to add to my code below to have the tooltip hover on top?
<div ng-repeat="item in c.data.list track by $index" class="list-group-item">
<div class="flex">
<div style="margin-right:auto;">
<span class="h4">{{item.short_description}}</span>
<div>
<small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">Last Updated: {{item.last_updated}}</span></small>
</div>
</div>
<div class="h4">
<a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Preview"><i class="fa fa-eye"></i></a>
<a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Download"><i class="fa fa-download"></i></a>
</div>
</div>
</div>
I had an issue with tooltips being cut off as well and what worked for me was to set the data-container to 'body'. For example:
<span data-toggle="tooltip" data-placement="bottom" data-html="true" data-container="body" title="bla">