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">
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?
It is a bit complicated to tell when I am trying to do so I add a drawing ;) I hope it's clear enough
I want the menu to go on the top and stay here when going down, but this only after the header has been scrolled to its bottom.
I am using bootstrap and also wonder how to make the selected submenu as active when I scroll to it
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important">
<div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
</li>
</ul>
</div>
</nav>
<div style="margin: 2em;"></div>
</div>
You should use position: sticky; to achieve this type of navigation menu. Click on below website to read more in details.
Open this site
I hope this is what u r expecting check my answer.
just add the below given css properties to nav bar:
position:sticky;
top:0;
z-index:1;
NOTE: check out my answer in full screen mode. Because According to u r code navbar appears only in large screens
Demo:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<p>some text</p>
<p style="margin-top:100px;">some text</p>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important;position:sticky; top:0;z-index:1;">
<div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
</li>
</ul>
</div>
</nav>
<div style="margin: 2em;"></div>
<div class="jumbotron text-center">
<h1>some contents </h1>
<p>lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<div class="container">
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
</div>
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 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 am using twitter bootstrap and the 'media-grid' feature to display some thumnabils of images. Here is what it looks like right now: http://jsfiddle.net/vXMMA/
What I would like to do is add a caption to these thumbnails.. can someone offer some idea on what changes to CSS I would need to make to enable this.
The latest bootstrap comes with a .caption class that you can add to your thumbnail grid, you can place it above or below your media grid quite easily and it works like so:
<ul class="thumbnails">
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
</ul>
<hr>
<ul class="thumbnails">
<li class="span4">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span4">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
</ul>
You can center the caption inside the image container by just modifying the .caption class and adding the text-align: center property, like so:
.caption {
text-align:center;
}
Demo: http://jsfiddle.net/2BBnR/
Note Noticed this post is old, so the other method posted is irrelevant with the latest bootstrap, the .media-grid class is no longer used.
HTML
<li>
<a href="#">
<legend >Caption</legend>
<img class="thumbnail" src="http://placehold.it/140x90" alt="">
</a>
</li>
CSS
legend { margin:3px; text-align:center;width:100%}
Working DEMO
Just use the <legend> tag before or after each image, and add the text-align:center style to the image grid.
See this demo, it works great.