When I first installed twitter bootstrap and hadn't edited any Bootstrap code (the carousel) the navbar looked normal but it was a bit away from the edge.
And this is what it looked like when it was resized small:
Then when I changed the size of the navbar so it fit the entire page using CSS height and width it started glitching out:
When the browser wasn't resized it looked normal but if you made the browser smaller:
Also if the browser wasn't at the default size but it wasn't really small it would move away from the edge.
This is the code to make the collapsing function:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
This is the CSS code for my navbar:
.navbar{position:relative;top:65px;height:75px;width: 100%;margin-bottom:20px;border:1px solid transparent}
How can I keep the collapsing thing and also make sure the navbar is always going from the edge to edge of the web page without it glitching out and the words disappearing and stuff like that?
As you use bootstrap you'll only need to remove "container" class from the parents of "navbar" in your html, that'll make the navbar goes full width
Related
I have this set of codes, taken from https://getbootstrap.com/docs/3.3/components/#navbar.
<button aria-expanded="false" class="collapsed navbar-toggle" data-target="#main_menu" data-toggle="collapse">
<span class="sr-only">toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
It is just a basic burger button for mobile or small view, nothing fancy. The Bootstrap 3 handle this manually when the horizontal viewport getting smaller at some rate the burger button appeared.
My question is that how can I manually show the burger button (instead of it magically shown through Bootstrap)?
define an Id for the button... and show/hide it from codebehind when your conditions are met
buttonId.Visible = True/False
Well, it's hidden by CSS if the screensize exceeds a certain width (768px).
#media (min-width: 768px)
.navbar-toggle {
display: none;
}
If you want to always show it, remove this rule or overwrite it with your own rule.
I'm working on a site for my employer and have run into a little bit of an issue during our "rebranding" stage. The page in question can be found here: http://chargehubdevchris.azurewebsites.net/
The issue is specifically with the index page, and concerns the brand logo / text. The text is using a web font (that we generated) and the logo is an image placed inline within the Navbar-brand class anchor tag.
The img is forcing both elements to drop down about 10px from the desired height, and exceeding the nav's desired height.
The code in question is as follows:
<div class="navbar-header page-scroll">
<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 page-scroll" href="#page-top"><img class="homelogo" src="logos/ChargeHub-Logo.png"/><span class="greylogo">Charge</span>Hub</a>
</div>
I've tried to use the "pull-left" class on the img, which then aligns the text properly with the rest of the nav, but leaves the img out of line. I've applied the pull to other elements, attempted adjusting Vertical-align, and even some negative margins. They didn't really accomplish what I wanted, without causing more of a headache down the line.
I have also tried placing them in a div, floating it, setting it to display inline-block, but I couldn't get it to play nicely.
I know I must be missing something probably rather obvious, but I've tried all that I can think of, and everything that I could find online to no avail, and was hoping somebody could help me sort this. It seems like there MUST be an easy way for bootstrap to accomplish this, as I cannot be the first to try!
I did solve this problem in this way.
.navbar-brand img {
position: absolute;
top: 0px;
}
thanks :)
In your <a class="navbar-brand page-scroll" href="#page-top"> element, change the padding-top property to make it placed upper.
.navbar-default .navbar-brand {
padding-top: 0;
}
I see when you scroll down, some JS code will add navbar-shrink class to the bar. Try to add padding-top modification under this class:
.navbar-brand :not(.navbar-shrink) {
padding-top: 0;
}
When I make my browser window small, the text starting with "Open" ends up taking up several lines and I can't get the everything below to be pushed down lower. Instead, the buttons and hidden, and the main image is blocked by the text. How can I get the resizing to happen automatically? The site is: http://opensimulationsystems.org/
I tried adding "height:auto" to the navbar-header in Chrome developer tools, but "auto" isn't an option. I'm using Bootstrap Theme template.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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=".">Open Simulation Systems: The Common Agent-Based Simulation Framework (CABSF) & The Agent and Simulation Repository</a>
That's happening because navbar-brand class is floating.
One way of fixing that is using a media query for small screens on your css, setting navbar-brand to not float. Something like this:
#media screen and (max-width: 700px){
.navbar-brand {
float: none;
}
}
It is the float:left that is making it overlap. For smaller screen sizes you can apply specific styles with media queries like
#media (max-width: 500px) {
.navbar-brand {
float: none;
height:auto;
}
}
If you will remove float:left element style from .navbar-brand then you have to set your header again with padding and all the other things.
But if you remove height:50px from .navbar-brand then it will automatically set all the things. And in media query you can adjust with the width of .navbar-brand.
I have tried to show a logo on the header of my website but have been unsuccessful despite trying a number of times. I have tried to set the logo using HTML syntax as well as using the:
.div
{
content: url (...jpg);
}
Both have returned a small box in the header with a question mark in it. I have no idea why i am having issues with getting it to display the logo.
this is what it looks like at the moment:
and this is the code i have in css:
.logo::before {
content: url(new-bcu-logo.jpg);
}
html:
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
<span class="sr-only">Toggle navigation</span>
</button>
<div class="logo navbar-brand">Student Dashboard</div>
</div>
Any ideas how I can get this logo to display. Much appreciated.
You need to make sure new-bcu-logo.jpg is in the same folder where you css files is, if you use inline style make sure that image is in the same folder as the html file.
I can make my logo fit in the Navbar. I just put it in the . However, I want my logo to protrude a little bit from the Navbar. That is, I want 10% of my logo above the navbar and 10% of it below the navbar and the rest of the logo should be centered in the navbar.
I'm using a template that was bought online from wrapbootstrap.com and the template obvouisly uses bootstrap. Here is the code for the navbar
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="assets/images/logo.png" alt="Logo">
</div>
You could probably use z-indexes for that and make the image just that 10% bigger. So make a class for the logo`
.logo {
z-index: 2;
margin-top: -10px; /* You just have to play with this a little bit to get the preferred result*/
}
.navbar-header {
z-index: 1;
}
and then make the logo just a bit bigger. Play a little with the width and height.
`
I would use relative and absolute positioning. If your navbar has a height of 50px and the logo is 70px high you can set .navbar-header{position:relative; height:50px;} and .logo{position:absolute; top:-10px;} this leaves you with 10px above and below the navbar.