On pressing the "schedule a call" button the navbar is breaking on some windows PC while using chrome browser.
http://pracly.com/experts/profile/1
The code for the navbar is as follows:
<div class="collapse navbar-collapse" id="main-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
</ul>
</div>
The code for schedule a call buttonis as follows :
<div class="external-links">
Schedule a Call
<a target="_blank" href="http://www.linkedin.com/in/faheemahmed" class="btn btn-sm btn-default">LinkedIn</a></div>
The image for this phenomenon can be seen from this link : http://imgur.com/SBpGOpF
your nav bar may be using a pixeled width(1280px) try using a percentage width.
code that works
html:-
<html>
<div class="nav"></div>
</html>
css:-
.nav{
width:100%;
height:64px;
position:fixed;
/*make sure that te div touches the top */
top:-22px;
margin-top:22px;
/*make sure that the div touches the left*/
left:-22px;
margin-left:22px;
background-color:black;
}
Related
I was able to center my navbar with the CSS below. Now I want to put another element but pull that to the right. However, when I add the icon, it drops down to the next line. How do I center my navbar and add the icon, while keeping everything inline?
This is a piece of my navbar with the css.
<div class="collapse navbar-collapse" id="myNavbar" style="text-align: center;">
<ul class="nav navbar-nav">
<li >Home</li>
<li >About</li>
<li >Get Help</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-search pull-right" aria-hidden="true" style="font-size:18px; display: inline-block;"></span></li>
</ul>
</div>
CSS:
#media (min-width: 708px){
.navbar-nav{
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
One option is to add the "top" property on the element then give it a negative value to correctly position your search icon.
.search {
top: -50px;
font-size: 18px;
}
If necessary, adding additional navigation links wont't break style .
See my plunker
Also, you may take out the styles in your HTML tags.
I have put an image on the top of my page, but I also want to insert a navigation bar on the top of the page (in front of the image). But the reality the navigation bar is above the image, I cant put them both on the same row, I can do it with make the navibar fixed top, but its really annoying when I scroll down. Is there any way to solve my problem?
(PS: Image is not a background!)
<nav class="navbar " role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
</ul>
</div>
</div>
</nav>
<img src=" ">
This should work:
.navbar {
position: absolute;
top: 0;
left: 0;
}
See: https://jsfiddle.net/tcybj6sj/
You basically had the right idea: Pin the nav bar to the top of the page. But instead of using position: fixed, which pins the nav bar to a fixed position within the browser window, use position: absolute, which pins the nav bar to a fixed position within the page.
I realize this has probably been answered before, and if so, please direct me to another page.
I have a menu bar that goes horizontally across my page. I have several links and I want spacing so the links will fill the width of the nav.
CSS:
nav {
width:100%;
float:left;
text-align:center;
}
HTML:
<nav id="menu">
<a id="home" href="index.html">Home</a>
<a id="link" href="link.html">Link</a>
<a id="another" href="really.html">Another</a>
<a id="lalala" href="stupidcode.html">Lalala</a>
<a id="oneMore" href="example.html">One More</a>
</nav>
Using display: table-cell on the elements inside nav works.
Fiddle: http://jsfiddle.net/mnmxm2h0/
In my Twitter bootstrap website I have a navbar. It has buttons on it.
I add "btn-success" or "btn-danger" classes to them for color markup.
I make this because when user changes theme (css) buttons is shown with respect to that theme.
I use navbar-inverse. So background is black. I change button link's color to white. But the problem is when user hovers on button, button becomes transparent and the color can't be read.
So I need navbar buttons to be visible, even user hovers on it. I want button color to be same when hover or not.
My fiddle: http://jsfiddle.net/mavent/4RhhF/15/
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header" style="text-align:center;">
<div style="padding-top: 15px;">
Example.com
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a class="btn btn-danger" style="color:#000" href="#">
<span>MyButton is very good</span>
</a>
</li>
<li>
<a class="btn btn-success" style="color:#000" href="#">
<span>MyButton is very good 2</span>
</a>
</li>
</ul>
</div>
</nav>
You'll have to add the following in your custom css file:
/* This would be for the danger button... */
.navbar-inverse .navbar-nav>li>a.btn-danger:hover {
background-color: #d9534f;
}
/* ...and this one for the success button */
.navbar-inverse .navbar-nav>li>a.btn-success:hover {
background-color: #5cb85c;
}
You're basically manually re-coloring the background color of each button on hover.
Here is your updated fiddle.
The basic bootstrap template here has a fixed bar at the top. I want to place a div directly underneath it.
Here's the HTML of that bar (copied straight from the page's source so there are CSS class references):
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Project name
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<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>
</ul>
<form class="navbar-form pull-right">
<input type="text" placeholder="Email" class="span2">
<input type="password" placeholder="Password" class="span2">
<button class="btn" type="submit">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Here's my attempt at a div to go underneath it:
<div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;">Hello</div>
It almost works but the problem with this is the 'top:40px;'. When you resize the screen, the fixed bar at the top changes height.
How do I make it so that it always sits directly underneath the bar regardless of the bar's height? Bonus points for how to center it horizontally without using <center>
Edit: for the horizontal centering thing, i tried wrapping my div in a div with 100% width and then adding 'margin:0 auto' to it, but that doesn't work with fixed position
Edit2: here is the jsfiddle. line 38 of the html is my attempt, everything above that is the nav bar div.
If you're already using jQuery you could use something like this:
Working Example
Full screen example
x = (function() {
var t = $('.navbar').height();
var c = $(window).width() / 2 - $('.new').width() / 2;
$('.new').css({
top: t,
left: c
});
});
$(document).ready(x);
$(window).resize(x);
Note: updated examples with media queries to better show the effect of the script.
Of course you can do this with CSS alone, but you will need to use a media query like so:
CSS only working example
.new {
position:fixed;
margin: 0 auto;
top: 51px;
left:0;
right:0;
background-color:#CF4342;
color:#fff;
z-index:5000;
width:50px;
}
#media (max-width: 979px) {
.new {
top: 61px;
}
}
Notice that the css only solution will "break" if you narrow the screen too far. The jQuery solution won't have that problem.
Try to add this line in your css or edit the class in the bootstrap css file. Make sure your css file is under the bootstrap css file incase you choose to add it in your own. Does it make sense?
.navbar-fixed-top {
margin-bottom: 0 !important;
}
Bootstrap says the following in it's documentation:
Add .navbar-fixed-top and remember to account for the hidden area
underneath it by adding at least 40px padding to the <body>. Be sure
to add this after the core Bootstrap CSS and before the optional
responsive CSS.
So that is what i would try...
I updated your fiddle to demonstrate http://jsfiddle.net/Pevara/MgcDU/5403/
I did the following:
- Moved your 'hello inside the container with the hero unit
- Removed the positioning on the 'hello'
- Removed the 10px margin you set on the .container
- Added the following to your css, as suggested by Bootstrap
body {
padding-top: 40px;
}