bootstrap 3 brand name middle nav bar - javascript

I am trying to design a responsive site using bootstrap 3 with brand name middle in nav bar. I want that two collapse bar in the two side of the nav bar. But I am facing problem. The left collapse bar is not adjusting with the logo it comes above the logo when I resize the window. Here is the image after implementing the code.
HTML code :
</header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<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="navbar-brand navbar-brand-centered"> <img src="images/plogo.png">
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS Code :
#media screen and (min-width:650px) {
.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 160px;
text-align: center;
background-color: transparent;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}
}
My main nav bar will be like this :
Can any one tell me how I customize nav like this ? I have plain html and css for my desired design but when I use them with bootstrap position changes like mentioned above.


I could now recreate the issue, the problem is that you have way too much content on your navbar.
If you want everything to be shown in the navbar you have to either scale down your image or adjust the container's width. That isn't too beautiful and may cause trouble if you use the container again.
But even if you do this, there are some cases (try to scale you window down a little more than mobile) in which the image still overlaps the Navbar Items!
If you want to create a responsive page, please code so the Site can adjust to any size, so you should allow the image to behave responsive and so scale down.
Simply add a #media rule to scale down the width of your navbar-brand and adjust it to center correctly by changing spacing rules like padding.
PS: I saw your Image isn't centered correctly, you should add a width to your navbar-brand and adjust the margin-left to half of the image's width.

Related

Anchor color on hover state not working

I would like ALL my anchors text to turn to green while being hovered on.
I expected a:hover{ color: green; } to work but it doesn't.
Could someone explain me why ?
Thank you.
Here is my code:
a:hover{
color: green;
}
<link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- end container -->
Also on Codepen

Bootstrap uses classes to style their nav links. When using styles, there's a weight to the prioritization of styles. a:hover by itself will get overridden by .nav.navbar-nav li a:hover, even if it was defined before your code.
Read about this here:
https://css-tricks.com/specifics-on-css-specificity/
P.S.
Try your best not to tack on !important to your styles. It makes changing things down the line much more difficult, makes your code maintainability incredibly difficult and will make anyone working on your project like you not as much as they should :)
There are definitely times where !important is needed, but I'd just like to say be conservative in its use.

You are using Bootstrap which has defined the colours on anchors is various places.
Rather than just overriding Bootstrap (and there are multiple cases where this will be needed to cover all anchors) make use of Bootstraps inbuilt combustibility.
Download the source, update the applicable SASS variables that control the colours and include the source in your build process.
With Bootstrap pre-4 there are a couple of other options: tools to download a ready customised Bootstrap (essentially do the work of modifying the SASS variables and transpiling for you). Or use a Bootstrap theme. (Overriding $navbar-default-brand-hover-color will change the hover colour in the navbar.)
Any of these will initially take longer, but when the next "just change that" requirement comes along you'll be in a position to do it quickly.

Since you are using bootstrap library navbar it has its own define css classes therefore you are not able to see the changes.
Please use
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{
color: green;
}
-Help :)

add this
.navbar-inverse .navbar-nav > li > a:hover{
color: green;
}

The "navbar" class is already applying a style to tags inside it. It overrides your custom style.
CSS is interpreted. A style declared first, will be overridden by the same style declared after it. So just change up the order in which you're including your style sheets. Plugins and frameworks first. Custom styles come last.
<link rel="stylesheet" href="https://bootstrap.css" />
<link rel="stylesheet"href="mystyles.css" />
Now the styles in mystyles.css will override anything that the plugin has of the same name instead of the other way around.
New styles, should have the same specificity as the ones they're overriding (unless they have !important). Refer (Specificity)[https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity].
For this case
.navbar-inverse .navbar-nav > .active > a:hover {
color : green;
}
as opposed to
a {
color : green;
}

Whatever the framework in use, to determine what could be the css rule that fits, inspect the element with the developer console first. In this case you will find this:
.navbar-inverse .navbar-nav > li > a:hover {…
The thing is, your new rule have to be even more specific to take over the original one. The more specific, the more specifi your rule is the more it will rule them all.
According to Mozilla Developer Network documentation, here is a list of selector types increases by specificity.
0 — Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
1 — Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
2 — ID selectors (e.g., #example).
You want all anchors (of your page?) to be illegible, then for the rule not to be too verbose, you might need to add an id attribute on some top most ancestor that is common to all anchors! You must such a top container block (could also be html or body tags but that would feel ugly)…
Here is what you get when adding a <div id="common-ancestor"> surrounding all your code:
#common-container a:hover{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="common-container">
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- end container -->
</div>
<!-- end "#common-container"-->
The Joker:
You may have heard of the !important suffix eg color: green !important;.
Usually it is used as a last resort like if you are absolutely sure you will not need to override the rule it is applied to (but who does!?) and existing rules are to complicated to be overridden).
The only way to override rules having !important is to write another rule with !important that will appear later in your source code (interpreted later by the css engine).
Improper use or over-using it will surely lead you to complete madness, use at your own risks.

add this !important
a:hover{
color: green !important;
}
By default, it was white. In order to override it, you need to put !important
NOTE
Only use !important to override if you feel need it. Otherwise, you need to change the a to specific class name

Using Span for Triggering Bootstrap Dropdown

I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?

You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/

Bootstrap navbar dropdown-toggle with link on mobile

I'm dealing with a problem with Bootstrap navbar, where I have multiple dropdowns but I need the actual dropdown-toggles to be links aswell, it works on desktop, but there is a problem with that on mobile, where there is no hover which Im using to show the dropdown.
For example this basic menu:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
I am controlling the hover dropdown with JQuery.
I want to have the dropdowns shown on mobile automatically, so you can click all of the links.
I used the solution described here on stackoverflow
Problem with that one is that if you have another link or dropdown under the first one, the second one overlays the dropdown menu above it so you can't click it.
Look at this jsFiddle
When the navbar is collapsed, open it and try to hover over the dropdown menu, you can see that the link underneath is highlighted instead.
For some reasone the bottom link element gets expanded, and I can't get rid of it.
Any help would be much appreciated.

How to make menu, navbar nav-pills nav-stacked collapse Twitter-bootstrap 3.0

I have this code, I want to make this menu collapse for mobile-devices
<nav class="navigation">
<ul class="nav nav-pills nav-stacked" id="nav-menu">
<li class="active" >Domov</li>
<li>Koncerty</li>
<li>Shop</li>
<li>Download</li>
<li>Kontakty</li>
<li>Troll</li>
</ul>
</nav>
And I want to do this:

I've found a similar question, which seems to have a detailed answer that will be useful for you. It didn't work perfectly for me, but it does seem much closer than I was before.
Check it out: makes nav-pills collapsable just like nav-bar in bootstrap

Try the following code. This should help you. I assume what you need from the reference link you provided. Though that site I guess is not using bootstrap.
<nav class="navbar navbar-default" role="navigation">
<div class="">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
You should get more help from docs
http://getbootstrap.com/components/#navbar

How can I change hover to mouseclick? (bootstrap, collapse)

Right now menu uses hover to toggle elements. How can I change hover to mauseclick?
<div id="nav-collapse" class="collapse out">
<ul class="nav">
<li class="logo" style="font-size: 25px;">WEBSITE-NAME</li>
<li>
<span data-toggle="collapse" data-target="#portfolio-collapse"></span>LINK #1
<ul id="portfolio-collapse" class="collapse out">
<li>SUB LINK #1</li>
<li>SUB LINK #2</li>
<li>SYB LINK #3</li>
</ul>
</li>
...
bootstrap.min.js code on my website (http://wklej.to/OrUbj/text).

Your question and issue is not clear. Please edit your question and include more details such as screenshot, fiddle links etc. However, according to Bootstrap Docs, the Navbar dropdown menu works for click event and the markups is as below:
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
If you are trying to get responsive menu, then your code would be similar to below:
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>

Categories

Resources