Hi I am making web site by using html & css I have problem with my nav bar. texts on the nav bar are shifting when I decrease the browsers size. Here pic
And my css code:
.menu{
margin-top:4em;
width:100%;
height:4em;
font-size:0.813em;
list-style-type:none;
background: rgba(255, 255, 255, 0.75);
position:fixed;
}
.menu li{
float:right;
padding:1em 1em;
display:inline;
}
How can I prevent this situation ?
Thanks.
This is because of your width of the navbar and de list-items.. When de 5 list-items together a wider than the total width of the navbar, it can collapse like in you image. To prevent this, you could use min-width
.menu{
....
min-width: 500px;
}
You need to use css media query. For example
#media (min-width: 768px) {
.h1 {
font-size: 21px;
}
}
#media (min-width: 480px) {
.h1 {
font-size: 16px;
}
}
And set different width of your navbar for different screen sizes.
Related
So I'm trying to make this website mobile friendly: coveartschildcare.com and all the header divs are overlapping and nothing I've tried seems to be working. This is the CSS I'm using:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
div#logo
{
float: left;
}
div#logo h1
{
font-size: 0.5em;
color: #777;
}
div#logo span
{
font-size: 1.4em;
color: #FFF;
}
div#header
{
background: url(../images/mobile-bg.jpg) no-repeat bottom center;
text-align: center;
float: left;
}
div#nav
{
z-index : 1;
float: left;
position: relative !important;
}
.container
{
float: left;
}
.clear {
clear: both;
}
}
I've tried making positions relative, absolute, floating left or none, auto width & height and nothing works. Any help would be greatly appreciated.
ok, what you are asking is to make the div tags smaller on your page so that they don't overlap?
to do that create a new rule like this one:
#media (max-width: 520px) {
div {
width: 50px;
}
body {
color: blue;
}
}
the max-width is the max-width that the browser will activate this on.
you can create two #media rules and change the second #media rule's max-width to equal a different number. the browser will activate the rule if the width is smaller than the max-width. when the screen size gets smaller than both of the #media rules it will run the smaller one
hope this helps...
I think, if you delte the position: absolute; on the #nav-wrapper{} it is no more overlapping.
I want to create a navbar with 3 parts: brand logo on right, login buttons on left, and a centered collapsible menu:
desktop:
mobile:
Demo on bootply
I have some problems with the current result:
can't align menu on center
I want the collapse button go to the other side of the page (against brand)
collapse button (expanded menu) is not working properly. (see the demo and image below)
this is the expanded menu:
it's a few days that I'm struggling with this. I have tried so many things. this is my most strait attempt.
Thanks to Sunil Gehlot, I solved it. The height problem was because of this:
.navbar {
height: 60px;
}
I changed it to this:
.navbar {
min-height: 60px;
}
and to position the login buttons I used absolute positioning:
.loginStatus{
position: absolute;
right:10px;
top:10px;
}
#media (min-width: 200px){
.loginStatus{
right:100px;
}
}
#media (min-width: 768px){
.loginStatus{
right:10px;
}
}
I wanted menu items to be centered in desktop and normally aligned in mobile:
#media (min-width: 768px){
.navbar-nav{
text-align:center;
}
.navbar-nav {
float: none !important;
margin: 0;
}
.navbar-nav > li {
float: none !important;
display:inline-block !important;
}
}
Full Demo
Hope it helps.
I have added text-center class on ul and i have used below css.
.navbar-nav {
float: none !important;
margin: 0;
}
#media (min-width: 768px){
.navbar-nav > li {
float: none !important;
display:inline-block !important;
}
}
please take a look here and let me know.
Thanks
I have a web page and menu made with element at the bottom of it (inside some DIVs):
.nav {
position: relative;
margin: 2px 0;}}
On smaller screens Id'd like to move menu to the top of the page.
I've added to CSS:
#media screen and (max-width: 600px) {
.nav {
position:fixed, top:0px;
left:0px;
min-height: 40px;
}
and tried different settings for the position tag (top, absolute, ...) to no avail.
Please help.
try this:
#media screen and (max-width: 600px) {
.nav {
position:fixed;
top:0px;
left:0px;
min-height: 40px;
}
instead of:
#media screen and (max-width: 600px) {
.nav {
position:fixed, top:0px;
left:0px;
min-height: 40px;
}
You always end a css line with a ; and than you can enter the following line. You don't end a line with a , like you did after position:fixed;
and remove the second } in your first rule;
.nav {
position: relative;
margin: 2px 0;
} /*one } and not two*/
I also have a small tip. I don't know what browser you are using but user the webconsole (F12 for the most browser). If you made a mistake it will be visible there.
I have a vertical menu on my website which I want to make horizontal when I shrink the webpage, how can I achieve this?
I leave here the site:
Link
I am using WordPress to create this website if that helps
the only thing the menu has so far is this:
#menu_esquerda{
float: left;
}
#menu-o-menu{
list-style: none;
margin-top: 20px;
}
#menu-o-menu a{
color: white;
text-decoration: none;
font-family: Lato, Arial;
}
#menu-o-menu li{
padding-bottom: 10px;
}
Use media queries to target the css to specific devices.
In your case assuming that you want to make the menus horizontal when you resize the window and the window size is less that 980px, declare the styles to be applied for all the devices with width below 980px within the below declaration
#media screen and (max-width: 980px) {
// write the css here
}
To make the menu horizontal try this
#media screen and (max-width: 980px) {
#lateral{
float:none;
width:100%;
}
#desc_fantas p{
height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need.
}
#menu-o-menu{
text-align:center;
}
#menu-o-menu li{
display:inline-block;
}
}
Use conditionals. At a certain width, the CSS would change and convert the menu into a horizontal one. Something like this. THIS code is no way related to your website. That is up to you to do!
#media screen and (min-width: 600px) {
#header ul {
display: block;
margin-right: 1.02048%; /* 10/980 */
}
#header form {
display: none;
}
#footer p {
display: block;
line-height: 30px;
color: #4e4e4e;
text-align: left;
float: left;
width: 16.3265%; /* 160/980 */
min-width: 120px;
margin-left: 1.0204%; /* 10/980 */
}
}
#media screen and (min-width: 1000px) {
#header form {
display: block;
}
#header ul a {
display: block;
float: left;
width: 74px;
}
#header div > a.mobile {
display: none;
}
}
you used max-width and max-height.
In such a situation, instead of width and max-width to the browser in a small window, you can improve the way it handles.
You've got a div#lateral on there that has a width="300px" that is confining your whole sidebar area. So, you've only got that much room to work with horizontally.
setting the display="inline-block" on your li elems works, but you'll need to dramatically adjust your font-size and margins, etc to make it look nice.
all i am new here and i was trying to make responsive header image and to some extent i have done with using this "dislay none "technique
#img1{
display:block;
}
#img2{
display:none;
}
#media screen and (max-width:480px){
#img1{
display:none;
}
#img2{
display:block;
}
}
so this is the technique that i am using but it doesn't maintain the qualtiy what i think so can you please tell to make a header image responsive that is shorter than this method
thanks in advance
Why not use background images?
.header {
background: url(img1.jpg);
width: 100%;
height: 200px;
}
#media screen and (min-width: 768px) {
.header {
background: url(img2.jpg);
}
}