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?
Related
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 have a Foundation 5 based site with a nav bar at the top.
Because my menu choices are larger text they overlap the left "Name" section when the screen is made narrower.
Is there a way to control when the nav menu slips into mobile style?
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<div class="logo">
<a href="#">
<img src="mylogo.png"/>
</a>
</div>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span></span>
</a>
</li>
</ul>
<section class="top-bar-section hide-for-medium-down ">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">
<a href="/home/index" class="menuMix">
#*<span class="menuMinor">Home Page</span>*#
<span class="menuMain allCaps">Home</span>
</a>
</li>
<li class="">
<a href="/home/about" class="menuMix">
#*<span class="menuMinor">Who We Are</span>*#
<span class="menuMain allCaps">About</span>
</a>
</li>
<li class="">
<a href="/home/contact" class="menuMix">
#*<span class="menuMinor">Get In Touch</span>*#
<span class="menuMain allCaps">Contact</span>
</a>
</li>
</ul>
</section>
</nav>
If you use SCSS you can try to decrease
$topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(13);
I trying to put few html elements to show them properly. But could not get how to place them inline.
CODEPEN : CODEPEN DEMO
<div class="jumbotron">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" height="35">
</a>
<div class="media-body">
<h6 class="media-heading"> This is small description of image </h6>
</div>
</li>
</ul>
<h6>Wat more? ....... </h6>
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Only value
</a>
</li>
<span> Above code should look like this </span>
<img src="http://snag.gy/cPTCL.jpg">
I'm triying to combine these two menus:
http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
The first one will stay unchanged and the submenu in the second one will be used with it. But as i begin to change the css code and make these to merge, i always encounter a particular error. The "ul,li and a" properties of the "responsive-retina-ready-menu" effects the submenu that i take from "overlay-effect-menu" and i can not separate these properties. I mean it shows the submenu as it has the same style with the main menu. What can i do about it?
The one i have:
<div class="main clearfix">
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Menu 1</span>
</a><div class="cbp-hrsub">
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Menu 2</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Menu 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Menu 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Menu 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 6</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 7</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 8</span>
</a>
</li>
</ul>
</nav>
</div>
The one i want:
<div class="main clearfix">
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Menu 1</span>
</a><div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Menu 2</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Menu 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Menu 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Menu 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 6</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 7</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 8</span>
</a>
</li>
</ul>
</nav>
</div>
Like I mentioned in my comments you need to specify the styles of parent and children elements separately.
For example, in order to set list-style:none to parent uls you need the following CSS selector:
ul {
list-style:none;
}
To keep the default styling to children uls, you need to add the following selector after the previous one:
ul ul {
list-style:disc;
}
Here's a demo based on the HTML given in OP with minimal styling but illustrating the way you can style parent and child elements separately. (Note: Hover on Menu 1)