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);
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 want to start hiding content 100px from top. I have applied Bootstrap Affix with Nav in same div. but when i am scrolling up affix work fine but i want to hide div after affix div not from browser top.
Here is my code
<div class="col-lg-9">
<div class="header-affix" data-spy="affix" data-offset-top="50" data-offset-bottom="380" style="z-index: 1" id="header">
<div>Content</div>
<div>Content</div>
<ul class="nav nav-inline act-details" id="menu" role="navigation">
<li class="nav-item active">
<a class="nav-link" href="#desc">Description</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#img">Images</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#maps">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#details">Details</a>
</li>
</ul>
</div>
<div class="act-detail">
<div class="description" id="desc"></div>
<div class="images" id="img"></div>
<div class="maps" id="maps"></div>
<div class="details" id="details"></div>
</div>
In your CSS file
.affix {
top: 100px
}
I am trying to get top-bar nav menu that contains an 280 x 70 image on the left bottom align the menu choices on the right. I can right and left align text in Foundation but I can't find a way to vertical align.
Example Fiddle
<div class="row full-width">
<div class="large-4 columns">
<img src="MyLogo.png" width="280" height="70" alt="My 280 x 70 Logo" />
</div>
<div class="large-8 columns">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<div class="logo">
</div>
</li>
<li class="toggle-topbar menu-icon"> <span></span>
</li>
</ul>
<section class="top-bar-section">
<!-- 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>
</div>
The easiest way is to use flexbox.
.top-bar {
display: flex;
justify-content: flex-end;
align-items: center;
}
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">