I'm trying to move my navbar to the right, tried both navbar-right, and pull-right, but all I get is something like this -
<div class="container" >
<h1 align="center">My Site</h1>
<div class="container" >
<ul class="nav nav-tabs navbar-right" >
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
</div>
<br>
Hello
</div>
So there are 2 problems here -
The grey line underneath the tabs is much shorter, and the tabs themselves aren't aligned properly - I want "tab1" to be the rightmost one, and correspondingly "tab4" the leftmost one.
I get the same results for navbar-right and pull-right. How can this be fixed?
Thanks!
you can easily have that behavior by just extending the Bootstrap.
Demo on JSBin: http://jsbin.com/zaniz/1/edit?html,css,output
all I did was added a right-to-left class to the <ul> and the CSS Style should be:
.right-to-left li { float: right; }
I've added the following rules to solve the problem without losing the border on the ul or reordering the markup:
.nav-tabs-right { text-align: right; }
.nav-tabs-right > li { display: inline-block; float: none; }
you can apply that to .nav-tabs directly but I prefer to create a separate class to replace .navbar-right
You can try this; if you want that gray line to cover the entire page horizontly
<div class="container" >
<h1 align="center">My Site</h1>
<div class="container" >
<ul class="nav nav-tabs" >
<li class="active pull-right" >tab1</li>
<li class="pull-right">tab2</li>
<li class="pull-right">tab3</li>
<li class="pull-right">tab4</li>
</ul>
</div>
<br>
Hello
</div>
I just added a float: right; (equal to pull-right) style to the <ul> and it seemed to produce the desired output, as for the tab1 being the rightmost one, it's probably best to reorder your markup to say:
<ul class="nav nav-tabs navbar-right" >
<li class="active">tab4</li>
<li>tab3</li>
<li>tab2</li>
<li>tab1</li>
</ul>
Using Bootstrap 5 you can simple add justify-content-end to the <ul> class
<div class="container" >
<h1 align="center">My Site</h1>
<div class="container" >
<ul class="nav nav-tabs justify-content-end" >
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
</div>
<br>
Hello
Related
I am trying to apply some styling to a sub menu item that I have designated with the class 'menu-mine', but I am unsure of the correct nesting sequence to use.
I am trying to transform part of my menu by changing the font size and ensuring it is uppercase, but am having trouble getting the nested selectors correct.
I want to apply it only to the menu heading with the class 'menu-mine' in the link. I am unable to apply the css class to any other selector as I am working with joomla. This is the (edited) version of the menu, and the CSS selector in question is in the 'OPAL' section.
<nav class="navbar navbar-mainmenu visible-md-block visible-lg-block vpf-mainmenu affix-on-scroll" role="navigation">
<div class="container">
<div class="inner-container">
<div class="collapse navbar-collapse vpf-mega-menu-container">
<ul class="nav navbar-nav vpf-menu" data-animate="slide" data-easing-open="linear" data-easing-close="linear" data-easing-time="100">
// other code
<li class="menuitem item-464 level-2 submenu col-xs-4"><a class="menu-mine" href="/index.php/en/by-stone/opal" ><span class="menu-group"><span class="menu-title">OPAL</span></span></a></li>
<li class="menuitem item-465 level-2 submenu col-xs-4"><span class="menu-title">CITRINE</span></span></li>
</ul>
</div>
</div>
</div>
</nav>
This didn't work.
.navbar-mainmenu .navbar-nav li.level-2 > a.menu-mine, .navbar-mainmenu .navbar-nav li.level-2 a.menu-mine span.menu-group > span {
font-size: 14px;
text-transform: uppercase;
}
The expected outcome is that the menu header 'Opal' will be in uppercase and the specified font size.
It looks like you just need to include first-of-type. I've added it to your declarations without suggesting any other modifications. I've added color: red to make the output clearer to researchers.
.navbar-mainmenu .navbar-nav li.level-2:first-of-type a.menu-mine,
.navbar-mainmenu .navbar-nav li.level-2:first-of-type a.menu-mine span.menu-group > span
{
font-size: 14px;
text-transform: uppercase;
color: red;
}
<nav class="navbar navbar-mainmenu visible-md-block visible-lg-block vpf-mainmenu affix-on-scroll" role="navigation">
<div class="container">
<div class="inner-container">
<div class="collapse navbar-collapse vpf-mega-menu-container">
<ul class="nav navbar-nav vpf-menu" data-animate="slide" data-easing-open="linear" data-easing-close="linear" data-easing-time="100">
<li class="menuitem item-464 level-2 submenu col-xs-4"><a class="menu-mine" href="/index.php/en/by-stone/opal" ><span class="menu-group"><span class="menu-title">OPAL</span></span></a></li>
<li class="menuitem item-465 level-2 submenu col-xs-4"><span class="menu-title">CITRINE</span></span></li>
</ul>
</div>
</div>
</div>
</nav>
I have the following code for a side-nav:
<ul id="slide-out" class="side-nav">
<li><a class="subheader">Last Updated:</a></li>
<li><a>Text Here</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
I also have the following header code:
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="button-collapse" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
So why is the menu item not coming up in my nav bar and why is it not triggering the side nav?
Also, if i remove the button-collapse class, I am able to see the menu but clicking on it does not trigger side-nav
Here is my jsFiddle
Edit: My problem is not the icon, it's the fact that clicking on the menu icon/text does not activate the side navigation menu.
How do I make the side-nav work on mobile AND DESKTOP
Class button-collapse was setting display:none in CSS due to following for desktop:
#media only screen and (min-width: 993px)
nav a.button-collapse {
display: none;
}
Not sure the reason of it.
However you can use other class than button-collapse and it will work.
HTML:
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="my-btn" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
JS:
(function($){
$(function(){
$('.my-btn').sideNav({
edge: 'left', // Choose the horizontal origin
closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: true // Choose whether you can drag to open on touch screens
}
);
}); // end of document ready
})(jQuery); // end of jQuery name space
Fiddle: https://jsfiddle.net/6hfrw33n/
If you want the menu to be accessible on all screensizes you just have
to add a simple helper class show-on-large to the .sidenav-trigger.
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="button-collapse show-on-large" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
as shown here: https://materializecss.com/sidenav.html
Add this line in you js file $('.button-collapse').sideNav();
I'm using this template:
http://bootstrap4.guide/
And I want to modify menu a bit, instead of having blue Bootstrap 4 text, I'd like to have a image there. It's looking all fine until I look at mobile view.
I'm expecting to have my image in the same place as the text:
However my image happens to appear under hamburger menu:
This is what I have at the moment:
<nav id='topNav' className='navbar navbar-default navbar-fixed-top'>
<div className='container'>
<button className='navbar-toggler hidden-md-up pull-right' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
☰
</button>
<a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
<div className='collapse navbar-toggleable-sm' id='collapsingNavbar'>
<ul className='nav navbar-nav'>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#one'>Cards</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#two'>Flexbox</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#three'>5 Tiers</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#four'>More</a>
</li>
</ul>
<ul className='nav navbar-nav pull-xs-right'>
<li className='nav-item'>
<a className='nav-link page-scroll' data-toggle='modal' title='A free Bootstrap theme' href='#aboutModal'>About</a>
</li>
</ul>
</div>
</div>
</nav>
I've just replaced Bootstrap 4 with this img tag: <img src='logo.png'/>. I'm quite new to bootstrap, if someone would help me to figure out how to sort this out, that'd be great.
I would suggest to divide the the hamburger and the logo in two equal parts by using bootstrap classes for small devices.(col-xs-6)
<div class="col-xs-12">
<div class="col-xs-6">
<button className='navbar-toggler hidden-md-up' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
☰
</button>
</div>
<div class="col-xs-6">
<a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
</div>
</div>
Adjust the navbar-brand class as needed for your logo image..
/* responsive nav */
#media(max-width:48em) {
.navbar-default .navbar-nav>.nav-item {
float: none;
margin-left: .1rem;
}
.navbar-default .navbar-nav {
float:none !important;
}
.navbar-default .navbar-brand {
float:none;
}
.navbar-default .navbar-brand img {
display:inline;
}
}
http://codeply.com/go/7HJgyK6nxQ
I want to create fluid layout using LESS and without using Bootstrap grid clasess like .span6 on html code. How can I do this?
When I wrote without LESS I create layout like this:
<div class="container-fluid">
<div class="row-fluid" id="header">
<div class="span4 block">
<h1 class="title">Sample Site</h1>
<h2 class="sub-title">Powered by Twitter Bootstrap</h2>
</div>
<div class="span6 block">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Pages</li>
<li>Typography</li>
<li>UI</li>
<li>Calendar</li>
<li>Tables</li>
</ul>
</div>
<div class="span2 block">
<div class="btn-group open">
<button class="btn">Dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Change password</li>
<li>Log in with another user</li>
<li>Change token</li>
<li>Log out</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid" id="slider">
<div class="span12 block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
Now, my layout looks next way:
<div id="wrap">
<div id="header">
<div id="logo">SiteLogo</div>
<div id="top-menu">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="logout">
Logout
</div>
</div>
<div id="slider">
and what I should write on my .less file if I want to make div#wrap -> .container-fluid,
div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2
without writting this clasess on html code?
First, this wouldn't really be semantic, at least, no more so.
The semantic form of <div id="top-menu"> is <nav> or <nav id="top">
The semantic form of <div id="header"> is <header>
In any case, there are instructions on doing this here:
Please stop embedding Bootstrap classes in your HTML
Honestly, though, it's not as simple as the author makes it look. Just because you have a <nav> inherit the styles of .nav from Bootstrap doesn't mean its children will inherit inherited styles as well.
So if I define a style from .nav ul, a <ul> element will not receive this style if it's in a <nav>.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
div#header{
.makeFluidRow();
div#logo {
.makeFluidCol(4); //Spans 4 cols
}
div#top-menu {
.makeFluidCol(6); //Spans 6 cols
}
div#logout {
.makeFluidCol(2); //Spans 2 cols
//Or you could have span1, offset1 using .makeFluidCol(1,1);
}
}
I've tried a few option but i can't manage to get 4 links to span across the navbar. I thought it would be quite easy to add the span3 class to each <li>.
Here's my HTML:
<div class="navbar center">
<div class="navbar-inner">
<div class="container row">
<ul class="nav span12">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
To center the links I've used the solution described here: Modify twitter bootstrap navbar
Here's the CSS:
.navbar-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
All I've managed to get is this:
How can I get those four links spanned on the same row?
Using spanX is not the best solution here (unless you're using bootstrap-resonsive.css, see below). You can uses percentages, as long as you're willing to modify you CSS when the number of items in the navbar changes.
You can make this work with default navbar markup:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
And two CSS rules. The first removes the margin on the <ul class="nav">, removes the float and sets its width to be 100% of its container (in this case, the <div class="container"> within <div class="navbar-inner">.
The second rule sets the width of each <li> to be a certain percentage of the width of the <ul>. If you have four items, then set it to 25%. If you have five, it'd be 20%, and so on.
.navbar-inner ul.nav {
margin-right: 0;
float: none;
width: 100%;
}
.navbar-inner ul.nav li {
width: 33%;
text-align: center;
}
jsFiddle DEMO
UPDATE
If you are using the responsive bootstrap CSS, you CAN use the built-in spanX classes, like so:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav row-fluid">
<li class="span4">Home</li>
<li class="span4">Link</li>
<li class="span4">Link</li>
</ul>
</div>
</div>
</div>
Then, all the CSS you need is:
.navbar-inner ul.nav li {
text-align: center;
}
jsFiddle DEMO
You did a good start but your markup doesn't reflect the real grid :
You don't put .spanX in a .span12
.container and .row might have conflicting properties
It seems to work with this :
<div class="navbar center">
<div class="navbar-inner">
<div class="container">
<div class="row">
<ul class="nav">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
</div>
Demo (jsfiddle) and fullscreen