I had a quick question regarding twitter bootstrap navbars. I'm attempting to change the width of my navbar to only occupy 80% of the page width and centered on the page.
I've tried setting the width of .navbar, .nav, .navbar-collapse to 80%, all either doing nothing or shrinking the navbar way too much.
Link to the code:
http://pastebin.com/fHWJfYTL
Thanks for your help.
Here are the selectors (media queries) used in BS3, if you want to stay consistent:
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
This is still accurate as of version 3.1.1
Demo
css
#media(max-width:767px) {
.navbar {
max-width:80%;
margin:auto;
/* float: left; or right as you want and then remove margin: auto*/
}
}
#media(min-width:768px) {
/* add here also if you want to have big menu 80% width */
}
#media(min-width:992px) {
/* add here also if you want to have big menu 80% width */
}
#media(min-width:1200px) {
/* add here also if you want to have big menu 80% width */
}
Try This:
.navbar {
margin: auto;
width: 80%;
}
Related
I am trying to make Advance search bar. I am using this template https://bootsnipp.com/snippets/2q81r.Everything is working fine only problem is, Search bar and dropdown menu is not full width 100%.I want dropdown menu cover full width of search bar and must be responsible.
In this template width of search bar and dropdown is fixed in pixel.
Only delete or comment the width property
#media screen and (min-width: 768px) {
#adv-search {
/* width: 500px; */
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
/* min-width: 500px; */
}
}
Instead of having something like:
searchbar{width: 500px}
Try using max-with to make it responsive:
searchbar{max-width:100%}
For the dropdown menu add:
.dropdown.dropdown-lg .dropdown-menu {
width: 100%;
//rest of code}
I recently made a tribute page using html and CSS. The website looks fine on desktop but on mobile,a horizontal scroll bar appears and make the website look left aligned.I think its because the images exceed the parent container but I am unable to fix it.
Github pages: https://rahulviveknair.github.io/Coldplay-Tribute-Page/
Code hosted on github: https://github.com/RahulVivekNair/Coldplay-Tribute-Page
The code used to adjust image but does not seem to be working
#image {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
}
I would suggest you to do the following:
remove margin and padding from the body, and set its width to 100%, in order not to rely on the default width applied by the browser:
body{padding:0; margin:0; width:100%;}
set a max-width if the disks cover:
#image-grid img {max-width: 100%;}
change the font-size of the title with media query:
#media screen and (max-width: 600px) {
h1 { font-size: 30px; }
}
The scrollbar only appears when your header "COLDPLAY" is getting too big/wide, which is due to its font-size. So you should use a media query for #title or h1 where you define a smaller font-size setting.
Try also wen do debugging to unable cache in DevTools(if you use Chrome).
Usually files are not updating and you don't see any result even if you change something.
Also check this page if you are beginner CSS Tricks
P.S. I also started with CodeCamp good luck on next assignments
Remove both #media for the h1 and replace them with:
h1 {
font-family: 'Montserrat', sans-serif;
font-size: calc(5vmin + 16px); /* (320,32)(1280,80) */
font-weight: 600;
text-align: center;
margin-bottom: -15px;
}
This calc() calculates the h1.font-size using linear equation y=mx+b (MathIsFun: linear equation) with points
point1 x1=320px y1=32px, fontsize 32px on a 320px display
point2 x2=1280px y2=80px, fontsize 80px on a 1280px display
and all h1.font-size for all display sizes inbetween/beyond (I tested this with your Codepen).
Did the same trick with the 'album' images by adding column-count and column-width
#image-grid {
column-count: 3;
column-width: calc(8.75vw + 252px); /* (320,280)(1920,420) */
...
}
Finally change CSS #image { max-width: 100% } to img { width: 100% } and all the images on the page resize responsively
See my Codepen
Note anything smaller than 320x320 can be considered a 'smartwatch'!
It's really easy, all you need to do is set the overflow-x value to hidden, if you only want to avoid a horizontal scrollbar and not a vertical one.
However, this will cut off things that go beyond the scrollbar, so you need to fix those widths as well.
New to media queries. But I think I've missed the boat somewhere.
Suppose I have a topBar like the one in the snippit below, made up of a topBar container, fixed width, and a list, and the entire unit is floated to the right. I would like it so as long as the screen is resized until, let's say 1000px, for the topBar to shrink along with the screen as it is resized. When it hits 1000px something else will happen, but we can worry about that later.
For this to work, do I need to set queries for both the topBar container and topBar fixed width, or just the container? Also, is it a Max width or a min width that I should be targeting for the overall screen?
#top-menu
{
width: 100%;
background-color: white;
height: 40px;
color: #00a5b5
}
#topMenu-fixedWidth
{
height: 80px;
width: 1156px;
color: #00a5b5;
margin: 0 auto;
}
#topMenu-fixedWidth ul
{
list-style: none;
float: right;
margin-right: 5px;
}
#topMenu-fixedWidth ul:nth-child(4)
{
margin-right: 0;
}
#topMenu-fixedWidth ul li
{
float: left;
margin: 10px;
<div id="top-menu">
<div id="topMenu-fixedWidth">
<ul>
<li class="topMenuText">Partners</li>
<li class="topMenuText">Careers</li>
<li class="topMenuText">Language</li>
<li class="topMenuText">Login</li>
</ul>
</div>
</div>
Since you want content to re-size along with a re-sizing screen, you should use viewport percentage lengths, such as vh and vw. Elements will be sized relative to the viewport.
Also, is it a Max width or a min width that I should be targeting for the overall screen?
Either. Doesn't really matter, unless you have a specific need.
#media ( min-width: 1000px ) {
/* executes code here when the screen is 1000px or more */
}
#media ( max-width: 1000px ) {
/* executes code here when the screen is 1000px or less */
}
More information:
Max-Width vs. Min-Width
Common breakpoints for media queries on a responsive site
You have your base css which applies to all screen sizes. Then beyond that, you just set whatever css classes you want to change when the screen size changes. For example if you want remove the float below 1000px, you would do the following:
#topbar {float: right;}
#media screen and (max-width: 1000px) {
#topbar {float: none;}
}
Your #top-menu already has a width of 100% so that will resize no matter what. Your #topMenu-fixedWidth will need to be inside of a media query like so:
#media screen and (min-width 1000px){
#topMenu-fixedWidth
{
height: 80px;
width: 1156px;
}
}
*note: You only need to include the styles you want to change within the media query.
Here's the page: https://hamzicabdulah.github.io/Raptitude/
The divs with the "other-stories" and "footer" classes overlap when the height of the "other-stories" div is set manually:
.other-stories {
height: 65%;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
}
}
If I remove the above code, the divs don't overlap. What's the workaround here, considering the manually set height of the "other-stories" div needs to stay there in order to work fine in Firefox?
Set Float to footer and other stories.
.other-stories {
height: 65%;
float:left;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
float:left;
}
}
It overlaps, because the <div>s in your <div class="other-stories"> are overflowing out of the div itself.
Why do you have a fixed height on other-stories what functionality are you trying to gain? Also, is there a particular reason you are using height %s?
With flex is a little tricky. I suggest to change all, remove flex display and use bootstrap grid. Do you know?
I have been trying to create a mobile friendly navbar that doesn't collapse.
By default the navbar collapses when the screen is shrunk to a < 768px width.
I know that this can be done by modifying bootstrap directly.
I want to avoid doing that and instead use overrides.
I stopped using navbar-header and applied the following css to stop the collapse.
/* stop navbar from collapsing */
.navbar-collapse.collapse {
display: block;
}
.navbar-nav>li, .navbar-nav {
float: left;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
.navbar-right {
float: right;
}
I have it so that it doesn't collapse. However, when the screen is < 768 width, the navbar increases in height and the brand, text, button, etc. that it contains are moved slightly.
Screenshot with screen width = 768
Screenshot with screen width < 768
I created a jsbin here http://jsbin.com/vojiqi/edit?html,css,output
Does anyone know why this is happening and how to stop it?
I just want a navbar that adapts to the screen size and doesn't collapse.
SOLUTION
Using bootstrap's navbar: http://jsbin.com/nemipu/edit?html,css,output
Not using bootstrap's navbar: http://jsbin.com/pediga/edit?html,css,output
Using bootstrap's navbar (no navbar-collapse)
http://jsbin.com/posuvu/edit?html,css,output
In addition to #isherwood answer, add border-top: 0; to the 'navbar-collapse.collapse' class.
Edit:
Assuming you want to take advantage of the Bootstrap navbar features, you could add the media query below to your CSS to stop the brand 'jumping' when the viewport changes past the breakpoint.
#media only screen and (min-width : 320px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
.navbar-nav>li>a {
padding-top:15px;
padding-bottom:15px;
}
.navbar-text {
float: left;
}
}
However, I would think you may want to put some space back in between the brand and the edge of the viewport.
You also have borders coming and going at that breakpoint, but this takes care of most of the problem:
.navbar-nav {
margin: 0 -15px;
}
Demo
Just add this to your code, bootstrap has a default margin in that case
.navbar-nav {
margin: auto;
}