I am using a bootstrap Nav for this page
http://careers.baffinland.com
I added the fixed-top class as I need a sticky top, but that then overrides navbar-right class and aligns the menu to the left. It also covers up my logo which was aligned left.
In addition i would like to hamburger responsive menu to open to the left, when you open in responsive mode, the drop down is stuck to the right of the button (this wont be clear until menu is aligned right again) which forces the toggle to jump to the middle of the page
<!-- <div class="site-nav col-6 col-sm-6 col-md-9">-->
<nav class="navbar navbar-expand-lg navbar-light bg-nav-bar fixed-top " role="navigation" style="max-width: 1360px; margin: 0 auto;">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://careers.baffinland.com/wp-content/themes/darkStarMediaTheme/images/logo.png" width="236" alt="Baffinland logo" class="banner-logo " style="float: left; text-align:left; left: 0px;" /></a>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><ul id="menu-main-menu" class="nav navbar-nav navbar-right"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-16 nav-item"><a title="About Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-16">About Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-16" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17 nav-item"><a title="Who We Are" href="https://www.baffinland.com/about-us/who-we-are/" class="dropdown-item">Who We Are</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-20 nav-item"><a title="Operation" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-20">Operation</a></li>
</ul></div>
</nav>
<!-- </div> -->
Your logo is outside of your navbar and your "navbar-brand" is on "display-none".
<nav class="navbar navbar-expand-lg navbar-light bg-nav-bar fixed-top" role="navigation" style="max-width: 1360px; margin: 0 auto;">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<img src="http://careers.baffinland.com/wp-content/themes/darkStarMediaTheme/images/logo.png" width="236" alt="Baffinland logo" class="banner-logo " style="float: left; text-align:left; left: 0px;">
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul id="menu-main-menu" class="nav navbar-nav navbar-right">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-16 nav-item">
<a title="About Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-16">About Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-16" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17 nav-item">
<a title="Who We Are" href="https://www.baffinland.com/about-us/who-we-are/" class="dropdown-item">Who We Are</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18 nav-item">
<a title="Our Leadership" href="https://www.baffinland.com/about-us/our-leadership/" class="dropdown-item">Our Leadership</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19 nav-item">
<a title="FAQ" href="http://www.baffinland.com/about-us/faq/" class="dropdown-item">FAQ</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-20 nav-item">
<a title="Operation" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-20">Operation</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-20" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21 nav-item">
<a title="Mary River Mine" href="http://www.baffinland.com/operation/mary-river-mine/" class="dropdown-item">Mary River Mine</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22 nav-item">
<a title="Shipping & Monitoring" href="http://www.baffinland.com/operation/shipping-and-monitoring/" class="dropdown-item">Shipping & Monitoring</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-23 nav-item">
<a title="Sustainability" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-23">Sustainability</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-23" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24 nav-item">
<a title="Overview" href="http://www.baffinland.com/sustainability/overview/" class="dropdown-item">Overview</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25 nav-item">
<a title="Health & Safety" href="http://www.baffinland.com/sustainability/health-and-safety/" class="dropdown-item">Health & Safety</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26 nav-item">
<a title="Environment" href="http://www.baffinland.com/sustainability/environment/" class="dropdown-item">Environment</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27 nav-item">
<a title="Communities" href="http://www.baffinland.com/sustainability/communities/" class="dropdown-item">Communities</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28 nav-item">
<a title="Learning & Development" href="http://www.baffinland.com/sustainability/learning-and-development/" class="dropdown-item">Learning & Development</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-11 current_page_item active menu-item-29 nav-item">
<a title="Careers" href="http://careers.baffinland.com/" class="nav-link">Careers</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-30 nav-item">
<a title="Media Centre" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-30">Media Centre</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-30" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31 nav-item">
<a title="News Releases" href="http://www.baffinland.com/media-centre/news-releases/" class="dropdown-item">News Releases</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32 nav-item">
<a title="Media Gallery" href="http://www.baffinland.com/media-centre/media-gallery/" class="dropdown-item">Media Gallery</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33 nav-item">
<a title="Document Portal" href="http://www.baffinland.com/media-centre/document-portal/" class="dropdown-item">Document Portal</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-34 nav-item">
<a title="Contact Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-34">Contact Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-34" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-35" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35 nav-item">
<a title="Contact Information" href="http://www.baffinland.com/contact-us/contact-information/" class="dropdown-item">Contact Information</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
I put your logo into the "nav" tag, maybe this helps you more to figure out. I recommend to copy one of these templates, so your html structure will work. https://getbootstrap.com/docs/4.4/components/navbar/
Well, navbar-right worked before I added the fixed-top class, you can disable fixed-top and try for yourself...
regardless, I did try your solution and it didn't work. I do appreciate the help though..
What I did do was this, I just added right margins to navbar-brand and pushed it over to where I wanted it
Related
I have a problem with my bootstrap ul.dropdown-menu in my header-menu. I have a li-item with a dropdown, but the dropdown only shows then I hover the li-item.
How can I make it, so it only shows on click and stay until I click on the li-item again or anywhere else?
I had made many Google search's, but I can't find the answer. Thise exampels on Bootstrap's website, have the same classes as my header menu.
<ul id="menu-primary" class="nav navbar-nav ml-auto custom-ul"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5305" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-5305 nav-item show"><a title="Item 1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="dropdown-toggle nav-link" id="menu-item-dropdown-5305">Item 1</a>
<ul class="dropdown-menu show" aria-labelledby="menu-item-dropdown-5305" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5321" class="custom-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-5321 nav-item"><a title="Dropdown item 1" href="#" class="dropdown-item">Dropdown item 1</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5322" class="custom-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-5322 nav-item"><a title="Dropdown item 2" href="#" class="dropdown-item">Dropdown item 2</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5323" class="custom-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-5323 nav-item"><a title="Dropdown item 3" href="#" class="dropdown-item">Dropdown item 3</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5324" class="custom-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-5324 nav-item"><a title="Dropdown item 4" href="#" class="dropdown-item">Dropdown item 4</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5316" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5316 nav-item"><a title="Item 2" href="#" class="nav-link">Item 2</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5299" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5299 nav-item"><a title="Item 3" href="#" class="nav-link">Item 3</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5302" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5302 nav-item"><a title="Item 4" href="#" class="nav-link">Item 4</a></li>
</ul>
If you click on the dropdown item, it shows a dropdown, but it disappear after removing the mouse. I want the dropdown to stay, until I click on the parent-li again or anywhere else on the website.
I have this menu in Wordpress (it's based on bootstrap)and I want it to stick to top when scrolled, but have some content on top of the menu:
Image:
Code:
<div class="menu-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-3">
<a class="navbar-brand" href="https://x">
<img src="logo" alt="Logo" class="img-responsive" title=" Logo">
</a>
</div>
<div class="col-lg-9">
<nav id="site-navigation" class="main-navigation text-right" role="navigation">
<div class="menu-menu-1-container"><ul id="primary-menu" class="menu"><li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8">Link</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14">Link</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13">Link</li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">Link</li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11">Link</li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10">Link</li>
</ul></div> </nav><!-- #site-navigation -->
<nav id="mobile-navigation" class="text-center" role="navigation">
<div id="mobile-menu-trigger">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-menu-1-container"><ul id="mobile-menu" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10">Link</li>
</ul></div> </nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
Since you are using the bootstrap, you can add its class "navbar-fixed-top" to the menu. The example of usage you can see here
If you just need to display the already attached menu correctly on top of the rest of the content - just use CSS z-index:
.menu-wrapper {
z-index:99999;
}
UPD: use this pattern to add classes on scrolling
I'm developing a wordpress website and I'm using bootstrap.
My menu have to allow dropdown menu but when I click it don't open nothing but if I inspect the code the <li> are there.
In mobile the toggle shows but I can't open when click. I see dom change when o click but nothing show.
My html is this and the menu shows perfectly in large screens.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container-fluid no-padding">
<div class="row no-margin">
<div class="col-xs-4 col-sm-4 col-md-3 logo">
<div class="navbar-header">
<a class="navbar-brand" href="/site/">
<img alt="site" src="<?php bloginfo('template_url')?>/images/logo.png">
</a>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-9 no-padding">
<div class="menu-operations">
<div class="languages">
</div>
<div class="social">
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-9 no-padding">
<div class="navbar-header logo-vertical">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-9 no-padding">
<div class="menu">
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul id="menu-menuprincipal" class="nav navbar-nav navbar-right">
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a title="Empresa" href="">Empresa</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-37 dropdown"><a title="Produção" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Produção <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-38 active"><a title="Produção" href="">Produção</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a title="Equipamentos" href="">Equipamentos</a></li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a title="Mercados" href="">Mercados</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30 dropdown"><a title="Qualidade e Ambiente" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Qualidade e Ambiente <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a title="Qualidade" href="">Qualidade</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a title="Ambiente" href="">Ambiente</a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a title="Notícias" href="">Notícias</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a title="Contactos" href="">Contactos</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
First of all you need to import jquery in your page. Then try again and show what happens
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I want to try dropdown transition effect in my website. I have tried giving
transition: all 2s ease-in-out
but it does not give result. I want to show dropdown while in hover in mobile view with some transition effect. I am currently using some of the class of bootstrap.
Here's my HTML
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-left">
<!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> -->
<a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch">
<img src="bild/Schweizerisch-Japanische-Gesellschaft.png" class="img-responsive showabove"></a>
<a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch">
<img src="bild/logomiddle.png" class="img-responsive showinbetween"></a>
<a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch">
<img src="bild/logosmall.png" class="showless"></a>
</div>
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- <li class="navbar-text pull-left">User Name</li> -->
<li class="dropdown pull-right">
<div id="lang_sel"><ul><li>DE <ul><li class="icl-en">EN</li></ul></li></ul><span class="sj-down-arrow">▾</span></div> </li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse navbar-right collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 21px;">
<ul id="menu-menu-1" class="nav navbar-nav"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-20">Startseite</li>
<li id="menu-item-580" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-580">Uber Uns
<ul class="sub-menu">
<li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-175">Ziel und Zweck
<ul class="sub-menu">
<li id="menu-item-226" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-226">testing</li>
</ul>
</li>
<li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183">Leitbild</li>
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204">Entstehungsgeschichte</li>
<li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-219">Vorstand</li>
<li id="menu-item-218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218">Aktueller Jahresbericht</li>
<li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-217">Archiv Jahresberichte</li>
</ul>
</li>
<li id="menu-item-581" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-581">Veranstaltungen
<ul class="sub-menu">
<li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">Jubiläum 2014</li>
<li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">Aktuelle Veranstaltungen</li>
<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">Vergangene Veranstaltungen</li>
<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">Fotogalerie</li>
</ul>
</li>
<li id="menu-item-582" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-582">Mitgliedschaft
<ul class="sub-menu">
<li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232">Aufnahme-Bedingungen</li>
<li id="menu-item-233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-233">Beitrittsgesuch</li>
</ul>
</li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">Varia</li>
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">Links</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">Kontakt</li>
</ul>
</div>
</div>
</div>
sorry for my language. Can someone tell me in which class should i need to give transition so that to make the dropdown while in hover or while in clicked action.
below is css for dropdown class called sub-menu:
#media (max-width: 900px)
.navbar-nav ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
box-shadow: none;
display: none;
}
#media (max-width: 900px)
.navbar-nav {
margin: 0;
padding: 0;
position: fixed;
left: 0; width: 100%;
z-index: 10;
background: #f8f6f6;
overflow: visible;
}
#media (max-width: 900px)
.navbar-nav li {
background: #fff;
position: static;
display: block;
float: none;
border: 0;
margin: 0;
border-bottom: 1px solid #fff;
border-top: 1px solid #999;
}
This is because bootstrap gives you dropdown which is display:none by default and on hover it is display:block but according to css rule transition property doesn't works on show hide condition.
You have to create your own dropdown with some other effect or you can use a plugin.
I have this site:
link
CODE HTML:
<div class="content-menu">
<div class="navbar navbar-inverse bs-docs-nav" role="banner">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".bs-navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="logo-mobile">
<img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-mobile.png">
<ul class="lang-top navbar-right">
<li>
En
</li>
<li>
fr
</li>
</ul>
</div>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<div class="menu-menu-1-container">
<ul class="nav navbar-nav" id="menu-menu-1">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22" id="menu-item-22">
Home
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27" id="menu-item-27">
News
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65" id="menu-item-65">
Events
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71" id="menu-item-71">
Delivery
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23" id="menu-item-23">
About us
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25" id="menu-item-25">
Contact
</li>
</ul>
</div>
<ul class="lang-top navbar-right">
<li><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon">
MENU
</li>
<li class="icon">
En
</li>
<li class="icon">
fr
</li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
</ul>
</nav>
</div>
</div>
CODE CSS:
.wrapper .content .content-menu {
/* width: 91%; */
/*background: #5B626A;*/
position: absolute;
z-index:9999;
/* left: 4%; */
margin: 0 auto;
left: 0;
top: 0;
right: 0;
}
I tried to put the above code "text align: center" but unfortunately does not work. Can you tell me please why it does not work?
What must I change for the items to be aligned in the center on any resolution?
Try this:
HTML
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<div class="menu-menu-1-container">
<ul class="nav navbar-nav" id="menu-menu-1"></ul>
<ul class="lang-top navbar-right"></ul>
</div>
</nav>
CSS
collapse navbar-collapse bs-navbar-collapse{
margin: 0px auto;
width: 1500px;
}
Create one More Div under navbar tag fixed width & set the nav css according width class ex : -
<div class="content-menu">
<div class="navbar navbar-inverse bs-docs-nav" role="banner">
<div class="width">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".bs-navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="logo-mobile">
<img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-mobile.png">
<ul class="lang-top navbar-right">
<li>
En
</li>
<li>
fr
</li>
</ul>
</div>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<div class="menu-menu-1-container">
<ul class="nav navbar-nav" id="menu-menu-1">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22" id="menu-item-22">
Home
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27" id="menu-item-27">
News
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65" id="menu-item-65">
Events
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71" id="menu-item-71">
Delivery
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23" id="menu-item-23">
About us
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25" id="menu-item-25">
Contact
</li>
</ul>
</div>
<ul class="lang-top navbar-right">
<li><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon">
MENU
</li>
<li class="icon">
En
</li>
<li class="icon">
fr
</li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
</ul>
</nav>
</div>
</div>
Css
.width{ width:1100px; margin:auto; }
width set on your screen size max screen size is 1100px / 1050px laptop - computer
Here is my solution:
put the ul into the div
<div class="menu-menu-1-container">
<ul class="nav navbar-nav" id="menu-menu-1">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22" id="menu-item-22">
Home
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27" id="menu-item-27">
News
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65" id="menu-item-65">
Events
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71" id="menu-item-71">
Delivery
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23" id="menu-item-23">
About us
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25" id="menu-item-25">
Contact
</li>
</ul>
<ul class="lang-top navbar-right">
<li><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon">
MENU
</li>
<li class="icon">
En
</li>
<li class="icon">
fr
</li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
</ul>
</div>
in css:
#menu-menu-1, .lang-top{
display: inline-block;
}
remote float: left from both the ul
.navbar-inverse .navbar-nav {
padding-left: 17px;
padding-top: 75px;
padding-bottom: 75px;
}
#menu-menu-1-container{
text-align: center;
position: relative;
}
This the result:
Step 1) Open a div tag between wrapper and container.
Step 2) Add css code to style tag.
HTML:
<div class="warpper" >
<div class="middle">
<div class="container ">
YOUR MENU BLOCK
</div>
</div>
</div>
CSS:
.middle {
width: 75%;
position: absolute;
margin-left: -37%;
left: 50%;
}