https://i.imgur.com/JBI7id0.png
So basically i am having an issue. I have no problem in moving any of the tabs to the right or left side. But when i try to center all the tabs i'm having no luck.
So in the image above i am trying to get TEST 1, TEST 2, DISABLED TAB AND TEST 4 to be centered on the page.
I am using the Extended Navbar with Tabs example on their website.
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab disabled">Disabled Tab</li>
<li class="tab">Test 4</li>
</ul>
</div>
</nav>```
You can use display flex on tabs-transparent class, justify-content: center will position them horizontally and as extra align-items: center will position them vertically.
.tabs-transparent {
display:flex;
align-items: center;
justify-content: center;
}
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab disabled">Disabled Tab</li>
<li class="tab">Test 4</li>
</ul>
</div>
</nav>```
Related
I need a dropdown like this inside a tab like this, I want the dropdown as tab using Materialize. How can I do this?
HTML:
<nav class="nav-extended">
<div class="nav-wrapper">
<div class="top-nav">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="drop-tab">
<li>
<!--Disabled Tab-->
</li>
</ul>
<ul materialize="tabs" class="tabs tabs-transparent">
<li class="tab space-tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab">Disabled Tab</li>
<li class="tab">Test 4</li>
<li class="tab">Test 2</li>
<li class="tab">Disabled Tab</li>
<li class="tab"><a materialize="dropdown" href="#" class="dropdown-button" data-activates="dropdown1">Dropdown</a></li>
</ul>
</div>
</nav>
<div>something</div>
<ul id="dropdown1" class="dropdown-content black white-text">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
CSS:
.tabs {
overflow-x: visible !important;
overflow-y: initial !important;
}
JS
$(document).ready(function() {
$('.dropdown-button').dropdown();
});
Dropdown in nav-extended what you want is an open issue for more information you can see the following link - github issues #3920
How to apply Bootstrap Sidebar & Sidebar collapse Menu
<ul class="nav nav-sidebar">
<li>
<a data-toggle="collapse" href="#collapseTwo" aria-expanded="true" data-parent="#accordion" >
<i class="glyphicon glyphicon-info-sign"></i>
About Us
</a>
</li>
<li>
<ul id="collapseTwo" class="collapse">
<li>
Quote
</li>
<br/>
<li>
About Us Page Content
</li>
</ul>
</li>
</ul>
so How to apply Bootstrap Sidebar & Sidebar only collapse Menu
try this code
html
<ul id="nav">
<li>Home</li>
<li>Products [+]
<ul>
<li>All Products</li>
<li>Product1 [+]
<ul>
<li>Product1</li>
</ul>
</li>
<li>Product2 [+]
<ul>
<li>Product2</li>
</ul>
</li>
</ul>
</li>
<li>Services [+]
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Support</li>
<li>Contact</li>
</ul>
demo
I have the following Bootstrap navbar, but when it displays in the xs layout, I want it to show on one line. How can I force it to display on one line and not break. It obviously has enough room.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Settings 1</li>
<li>Settings 2</li>
<li>Settings 3</li>
<li class="divider"></li>
<li>Settings A</li>
<li>Settings B</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<ul class="dropdown-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="divider"></li>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
</li>
</ul>
<div style="display:none" class="navbar-collapse">
<p class="navbar-text fix_navbar_left_larger">Company Name</p>
<p class="navbar-text fix_navbar_left_xs">Company Name</p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<a class="navbar-brand navbar-brand navbar-right dropdown" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand navbar-right" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
</div>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
Add class "pull-left" to the navbar header like so...<div class="navbar-header pull-left">. Also add class "pull-right" to the two dropdown list items like so...<li class="dropdown pull-right">.
See Fiddle
For future reference, just use the navbar default template from http://getbootstrap.com/components/#navbar to compare with your own code to find mistakes.
try adding pull-right to those two <li class="dropdown"> classes
For this you have to play with pull-left pull-right classes of bootstrap.
See my fiddle
Navbar is taking full width so give that class pull-left and other pull-right but your inner menu, they also needed float to get in one line so i gave both of them float left and right and you got the result :)
So now I finally got my pill dropdown working but another question then arose - as I use nav-justified to center my navbar, the pills are quite wide and the dropdown is all the way to the left of the pill. Can I center this dropdown in any way?
The JSFiddle looks like this: https://jsfiddle.net/htsda5xo/1/
A snippet of the HTML:
<div class="nav">
<ul class="nav nav-pills nav-justified">
<li class="dropdown">WEBDESIGN <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>HTML 5</li>
<li>CSS 3</li>
<li>Bootstrap 5</li>
</ul>
</li>
<li>DYNAMIC WEBDESIGN</li>
Try this,
.nav-justified>.dropdown .dropdown-menu {
/* top: auto; */
left: 50%;}
Try this
<div class="nav">
<ul class="nav nav-pills nav-justified">
<li class="dropdown">WEBDESIGN <span class="caret"></span>
<ul class="dropdown-menu text-center" role="menu">
<li>HTML 5</li>
<li>CSS 3</li>
<li>Bootstrap 5</li>
</ul>
</li>
<li>DYNAMIC WEBDESIGN</li>
I am having a little problem with the navigation list items going a little below the top-bar when I resize the browser. When I remove the image it seems to be working perfectly fine on all screen resolutions but inserting the logo has had an affect on this. Is there any way I can solve this. Can't seem to find out what the problem is.
HTML:
<!-- HEADER START -->
<div id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">
Sharp <span>Media </span>
</a>
</h1>
</li>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<li>Home</li>
<ul class="dropdown">
</ul>
</li>
<li class="divider"></li>
<li>FAQs</li>
<li class="divider"></li>
<li class="has-dropdown">
<li>Contact Us</li>
<ul class="dropdown">
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
</nav>