display:block; not applying on max-width: 320px.
Background changes to green, but <li> keeps displaying as float:
.parent-ul li {
display: block;
height: 32px;
width: 15.7%;
/* float: left;*/
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
top: 0px;
margin: 0 auto;
height: 38px;
width: 100%;
padding-top: 2px;
background: red;
}
.parent-ul {
position: relative;
list-style: none;
text-align: center;
margin-left: 16%;
}
.parent-ul li {
height: 32px;
width: 15.7%;
float: left;
}
.parent-ul li{
border-left: 1px solid silver;
}
#prod {
border-right: 1px solid silver;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 12px 38px;
font-size: 15px;
transition: color 1s, font-size .5s;
line-height: 32px;
}
/* 398px ================================= */
#media screen and (max-width: 320px) {
body {
background: green;
}
header {
position: relative;
top: 0px;
margin: 0 auto;
/* height: 38px;*/
width: 100%;
padding-top: 2px;
background: red;
}
.parent-ul {
position: relative;
list-style: none;
text-align: center;
margin-left: 16%;
}
.parent-ul li {
display: block;
height: 32px;
width: 15.7%;
/* float: left;*/
}
.parent-ul li{
border-left: 1px solid silver;
}
#prod {
border-right: 1px solid silver;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 12px 38px;
font-size: 15px;
transition: color 1s, font-size .5s;
line-height: 32px;
}
}
<body>
<header>
<ul class="parent-ul">
<li>Home</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
<li id="prod">About Us</li>
</ul>
</header>
</body>
whenever you use float always clear it. In your case you used float in web but you haven't clear it at 320 media query, clear it using the float: none; clear: both;
Related
I am working on web page layouts. I created this one.
https://codepen.io/iamgonge/pen/paOxxb
I dont understand why the .container .left-side and .right-side elements start at the top of the browser and not below the header. Shouldn't the layout out be header->section(hero)->section(one)? I would think that the top of any of those three divs would be underneath the header but they are not. What amy I not understanding here?
body {
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.container {
background: #333338;
display: inline-block;
width: 60%;
height: 800px;
}
header {
position: fixed;
background: #10105f;
width: 100%;
height: 150px;
}
.main-links a {
text-decoration: none;
color: #fff;
font-size: 20px;
text-transform: uppercase;
}
.main-links a:hover {
color: #00843d;
}
.main-links a:active {
color: red;
}
.left-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: left;
}
nav {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
nav ul {
margin: auto;
padding: 0;
display: inline-block;
list-style: none;
color: #fff;
// border: 1px solid #00843D;
width: 60%;
;
}
nav li {
display: inline-block;
margin: 5px -3px;
padding: 5px 10px;
// border: 1px solid#fff;
}
nav li:hover {
background: rgba(255, 255, 255, 0.25);
}
nav li:active {
border-bottom: 2px solid red;
color: red;
}
.nav-left {
float: left;
height: 50px;
width: 20%;
padding-bottom: 96px;
// border: 1px solid #00843D;
}
.nav-right {
float: right;
height: 50px;
width: 20%;
padding-bottom: 96px;
//border: 1px solid #00843D;
}
.nav-center {
position: relative;
padding-bottom: 21px;
margin: 0 auto;
height: 75px;
width: 300px;
// border: 1px solid #00843D;
}
.nav-right p a {
font-size: 16px;
text-decoration: none;
color: #fff;
}
.nav-right p a:hover {
color: #00843d;
}
.nav-right p {
margin: 20px;
padding: 0;
color: #fff;
}
.one {
display: block;
width: 100%;
height: 800px;
background: #080853;
}
.right-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: right;
}
.rss-title,
.rss-date {
margin: 0px!important;
}
.rss-feed {
margin: 10px 5px 20px 0px;
}
.rss-date {
padding: 0;
font-size: 12px;
font-style: italic;
}
.hero,
.one {
position: relative;
height: 100%;
}
.success {
display: block;
text-align: center;
margin-top: 20%;
font-size: 69px;
color: #00843d;
// margin-left: auto;
// margin-right: auto;
}
.success:hover {
font-size: 71px;
}
#timestamp {
margin: 10px 5px 20px 0px;
text-align: center;
color: #fff;
font-size: 16px;
}
#timestamp,
.rss-feed {
background: #080853;
padding: 10px;
height: 110px;
}
#media (min-width:1530px) {}
<body>
<header>
<div class="nav-left">
<div id="timestamp"></div>
</div>
<div class="nav-right"></div>
<div class="nav-center"></div>
<nav>
<ul class="main-nav">
<li class="main-links">home</li>
<li class="main-links">about</li>
<li class="main-links">projects</li>
<li class="main-links">portal</li>
<li class="main-links">links</li>
</ul>
</nav>
</header>
<section="hero">
<div class="left-side"></div>
<div class="right-side"></div>
<div class="container">
<div class="success"></div>
</div>
<!--***Container***-->
</section>
<section class="one"></section>
</body>
The reason is that you have applied position: fixed; to your <header> tag. When you do this you must account for the height of the header and push down other elements to restore the layout.
I have a rather nice navbar but unfortunatly, when I resize my laptop window a bit, the text starts overlapping. It seems to be stuck in the middle and wont make use of all the space, despite me having checked throughly that here are no padding or margins causing this.
This is how it looks on a big screen
this is the problem when I narrow the window a bit
Could someone please help me figure out why this is happening, please?
I would be very grateful.
My main CSS navbar (displayed on small screens):
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* I tilfælde af at der skal cleares */
br.tabula {
clear: both;
}
a {
text-decoration: none;
color: orange;
}
/*Fjerner underline osv.*/
a:link, a:visited {}
a:hover {}
a:active {}
/***********************************************************/
/* Specielle! */
/***********************************************************/
/***********************************************************/
/* Billeder! Img! ****** Video! */
/***********************************************************/
#burger {
width: 15px
}
img.lille-l {
float: left;
margin: 8px 20px 20px 0;
width: 160px;
height: 165px;
}
img.mellem-r {
float: right;
padding: 20px;
width: 350px;
}
img.top {
margin: 8px 0 20px 0;
}
.sponsor {
width: 50px;
height: 50px;
border: 0;
padding-bottom: 22px;
}
.klik {
padding: 5px;
box-shadow: 3px 5px #888888;
}
#socialbar img {
width: 30px;
height: 30px;
}
iframe {
width: 390px;
height: 250px;
float: left;
padding: 10px 15px 10px 0px;
border: none;
}
/***********************************************************/
/* Tekst! */
/***********************************************************/
h1, h2, h3 {
margin: 0 0 1% 0
}
/*****************************************************************************/
/* HEADER! ****** BANNER! */
/******************************************************************************/
#bannerkat {
margin-top: 1%;
width: 100%;
height: 46px;
background-image: url("billeder/katte/mathilde.jpg");
background-size: cover;
color: white;
border-bottom: solid 1px #444444;
}
/******************************************************************************/
/* NAV! */
/******************************************************************************/
/* Menu Button */
#menu-button {
z-index: 1;
text-align: center;
padding: 5px 5px 5px 5px;
position: absolute;
position: fixed;
top: 15px;
right: 5px;
transition: all 0.2s ease;
cursor: pointer;
width: 50px;
height: 35px;
background-color: #19c589;;
border-radius: 5px; /* pæne runde hjørner*/
-moz-border-radius: 5px; /* Fox*/
-webkit-border-radius: 5px; /* IE */
}
nav p {display:none;}
#mainlogo {display:none;}
#menu-button .bar {
display: block;
height: 4px;
background: black;
margin: 4px;
}
#menu-checkbox {
display: none;
}
#menu-checkbox:checked ~ #menu-button {
transform: rotate(90deg);
}
nav ul {
position: fixed;
display: none;
width: 100%;
}
#menu-checkbox:checked ~ #menu {
display: block;
}
#menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
border-radius: 20px;
overflow: hidden;
}
#menu li {
width: 100%;
background-color: beige;
text-align: center;
padding: 7px 2px 7px 2px;
}
This is the code for the nav in the images, displayed on larger screens with media query:
#mainlogo {display: block;}
#bannerkat {display: none;}
#menu-button {
display: none;
}
#menu {
display: block;
border-radius: 0;
text-align: center;
position: relative;
}
.mainheader {width: 100%; padding: 0 auto;
margin: 0}
#menu ul {width:100%; padding: 0 auto;
margin: 0}
#menu li {
display: inline-block;
width: 12%;
background: none;
padding: 0 ;
margin: 0;
}
#menu li a {
font-size: normal;
text-decoration: none;
color: #505050;
text-align: center;
line-height: 75px;
text-transform: uppercase;
transition: all .4s ease;
display: inline-block;
width: 100%;
border-top: 5px solid #80bb80;
}
#menu li:nth-of-type(2) a {
border-top: 5px solid #9b5e5e;
}
#menu li:nth-of-type(3) a {
border-top: 5px solid #5656b3;
}
#menu li:nth-of-type(4) a {
border-top: 5px solid grey;
}
#menu li a:hover {
border-top: 5px solid darkgreen;
}
}
nav { font-family: helvetica, arial, sans-serif;}
/* højde for billed-sektion*/
section {min-height: 204px;}
#baggrund {
background:
url("billeder/katte/sophi.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;}
#mainlogo {
font-size: 37px;
color: white;
border: 7px solid white;
display: inline-block;
padding: 10px;
position: absolute;
height: 123px;/* hvid boks*/
line-height: 25px;
top: 202px;
margin-top: -180px;
left: 50%;
width: 600px;
text-align: center;
margin-left: -300px;
text-shadow: 1px 2px 1px #000;
box-shadow: 1px 2px 1px #000; }
/* og omegns */
#mainlogo p {font-size: 20px; padding:5px;}
.vector{width: 60px;
margin-left: -450px;
margin-top: -36px;}
.mainheader {margin-top: 10px;}
/* Navigations menuen (links osv) */
#nav_wrap {
background: #f9f4ea;
width: 100%;
white-space: nowrap;
float: left;
height: auto;;
position: relative;
margin-top: 144px;
bottom: 0;
overflow: hidden;
z-index: 00;
opacity: .9;
box-shadow: 0px 1px 4px beige;
padding: 0;
}
/* MAIN! BODY! *********************************************************/
body {
background-image: url("billeder/bgorange.jpg");
background-size: cover;
color: black;
/* Base font size (14px)? 7%*/
font-family: sans-serif, arial;
line-height: 1.5;
text-align: left;
}
.body { width: 90%;}
.maincontent {
line-height: 20px;
width: 79%;
float: left;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
#Ginger
You should remove fixed width: 12% from #menu li.
#menu li word needs to be wrapped and font-size should be small on lower screen size. i.e word-wrap:break-word
I dont really no how to explain my question to get my expected result from readers but in soluction i need idea or soluction on How to code my css to output like this picture below in html menu dropdown
this my tried code:
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #555;
}
nav {
float: left;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(menu-icon.png) right;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: right;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
#media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul,
nav:active ul {
display: none;
position: absolute;
padding: 2px;
border: 2px solid #000;
center: 20px;
width: 100%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 2px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
but it output my menu dropdown like this
what should i do big thanks for your time and impact in my soluction
First One:
https://jsfiddle.net/Liamm12/9wkavvd0/1/
Second One:
https://jsfiddle.net/Liamm12/9wkavvd0/2/
Hello There!
Maybe this what you are looking to do
First One
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #555;
}
nav {
float: left;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(menu-icon.png) right;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: right;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
#media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav{
display:flex;
}
nav ul,
nav:active ul {
display: none;
padding: 6px 0px 0px 1px;
margin-left: 15px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 2px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Second One:
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #555;
}
nav {
float: left;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(menu-icon.png) right;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: right;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
#media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav{
display:flex;
}
nav ul,
nav:active ul {
display: none;
padding: 6px 0px 0px 1px;
margin-left: 15px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
nav li {
padding: 4px 8px 10px 5px;
margin: 0;
}
nav:hover ul {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
To solve your problem just use the flexbox!
.nav {
display: flex;
padding: 20px
}
nav li {
flex: 1
}
Set the nav to display: flex to show both elements in one line. Remove width of 100% from li and set a flex:1 so it expands to the given space. If you want to set a max-width - just set it with a value of your joice to bind it to a max expand range.
Remove the following
li {
display: inline-block;
float: right;
}
Further infos about the flexbox: https://www.w3schools.com/css/css3_flexbox.asp
I am not entirely sure this is possible with CSS, but I know it is with Jquery. If it is possible only with CSS, I would appreciate help that way as I don't understand Jquery at all.
I am looking to make a breakpoint at 800px. I need to hide all the li items except the logo at this breakpoint.. How do I make an exception the to logo, which is an li item as well?
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span {
margin: 0px;
padding: 0px;
}
h1 {
margin: 0 0 14px 0;
}
h2 {
margin: 0 0 10px 0;
}
.wht {
color: #fff;
}
.clear {
clear: both;
}
/*Vivid Page Settings*/
header {
width: 100%;
background-color: #fff;
border-bottom: #000 1px solid;
}
.vd-hide {
display: none;
}
.vd-settings-wrapper {
width: 15%;
max-width: 200px;
}
.vd-user-settings {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 0 21px;
}
.vd-currency-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 1px 2px;
}
.vd-language-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 3px 2px 0 2px;
}
/*Vivid Main Navigation*/
.vd-navigation-wrapper {
display: flex;
}
.vd-nav-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 75%;
height: 78px;
margin: 0 auto;
text-align: center;
}
.vd-nav-wrapper ul {
font-family: 'Montserrat', sans-serif;
/* text-align: center; */
list-style: none;
padding: 0;
margin: 0;
}
.vd-nav-wrapper li {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 25px 20px;
vertical-align: middle;
}
.vd-nav-wrapper a {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 18px 20px;
vertical-align: middle;
}
.vd-logo-img {
margin: 0px;
padding: 0px;
}
/*Vivid Checkout Settings*/
.vd-cart-wrapper {
width: 10%;
z-index: 10;
}
.vd-cart-selector {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
margin: -11px 31px 0 2px;
position: absolute;
top: 23px;
right: -9px;
}
<div class="vd-navigation-wrapper">
<div class="vd-settings-wrapper">
<div class="vd-user-settings">
</div>
<div class="vd-currency-selector">
</div>
<div class="vd-language-selector">
</div>
</div>
<div class="vd-nav-wrapper">
<ul>
<li>Shop</li>
<li>About</li>
<li class="vd-logo-img"><img src="img/vivid_logo.png"/></li>
<li>Lookbook</li>
<li>Contact</li>
</ul>
</div>
<div class="vd-cart-wrapper">
<div class="vd-cart-selector"></div>
</div>
</div>
This is the selector you need. I think it's self explanatory:
.vd-navigation-wrapper li:not(.vd-logo-img) {
display: none;
}
Edit Thanks to Hajji Tark for pointing out Edge and FF do not support :not() selector. The workaround is to set display:none for all lis and override it for the exception:
.vd-navigation-wrapper li {
display: none;
}
.vd-navigation-wrapper .vd-logo-img {
display: block; /* use inline-block or list-item if appropriate */
}
Haven't understood your #media queries requirements. Let me know if you need help with those. Basically you need to wrap it in a
#media (min-width: 800px) { /* rules here */ }
or
#media (max-width: 800px) { /* rules here */ }
If you want a specific case for 800px (equal to), you can use
#media (min-width: 800px) and (max-width: 800px){ /* rules here */ }
#media only screen and ( max-width: 800px ) {
li[class!="vd-logo-img"] { display: none; }
}
Media Queries
Here, I used the CSS media queries to determine the page document current size, if it gets to 800px, then the styles will be applied to the document.
Selector
I used the attribute selector to target all the <li> element excluding the <li class="vd-logo-img"> with a class equal to "vd-logo-img"
Another option:
.vd-navigation-wrapper li {
display: none;
}
.vd-navigation-wrapper li.vd-logo-img {
display: block;
}
This is possible because CSS applies the more restrictive rule.
In your Css:
.vd-nav-wrapper li { display: none )
.vd-logo-img { display: initial }
You can use css media query and :not() trick to hide all li without the logo.
See the css section. Live On Fiddle works fine on every browser.
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span {
margin: 0px;
padding: 0px;
}
h1 {
margin: 0 0 14px 0;
}
h2 {
margin: 0 0 10px 0;
}
.wht {
color: #fff;
}
.clear {
clear: both;
}
/*Vivid Page Settings*/
header {
width: 100%;
background-color: #fff;
border-bottom: #000 1px solid;
}
.vd-hide {
display: none;
}
.vd-settings-wrapper {
width: 15%;
max-width: 200px;
}
.vd-user-settings {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 0 21px;
}
.vd-currency-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 1px 2px;
}
.vd-language-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 3px 2px 0 2px;
}
/*Vivid Main Navigation*/
.vd-navigation-wrapper {
display: flex;
}
.vd-nav-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 75%;
height: 78px;
margin: 0 auto;
text-align: center;
}
.vd-nav-wrapper ul {
font-family: 'Montserrat', sans-serif;
/* text-align: center; */
list-style: none;
padding: 0;
margin: 0;
}
.vd-nav-wrapper li {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 25px 20px;
vertical-align: middle;
}
.vd-nav-wrapper a {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 18px 20px;
vertical-align: middle;
}
.vd-logo-img {
margin: 0px;
padding: 0px;
}
/*Vivid Checkout Settings*/
.vd-cart-wrapper {
width: 10%;
z-index: 10;
}
.vd-cart-selector {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
margin: -11px 31px 0 2px;
position: absolute;
top: 23px;
right: -9px;
}
#media only screen and (max-width:800px) {
.vd-nav-wrapper ul li:not(.vd-logo-img){
display: none;
}
}
<div class="vd-navigation-wrapper">
<div class="vd-settings-wrapper">
<div class="vd-user-settings">
</div>
<div class="vd-currency-selector">
</div>
<div class="vd-language-selector">
</div>
</div>
<div class="vd-nav-wrapper">
<ul>
<li>Shop</li>
<li>About</li>
<li class="vd-logo-img"><img src="img/vivid_logo.png" /></li>
<li>Lookbook</li>
<li>Contact</li>
</ul>
</div>
<div class="vd-cart-wrapper">
<div class="vd-cart-selector"></div>
</div>
</div>
In some ways, I'm still pretty new to CSS and don't "get" how things are done (is seems convoluted, and there doesn't seem to be an easy way to figure things out) - so I am hoping someone here can help me. I'll post the relevant code. I am a programmer - but can't seem to figure out how to do what I want. (BTW - are there any good tools for 'visually' editing CSS? I'm doing this purely by code).
a) I need an HTML text box to expand/contract as the browser window expands/contracts, with a 'search' image icon to the right of it.
b) I need some signup/login buttons right justified
c) I need the logo/text left justified.
So basically the flow is:
[#1 logo] [#2 menu items ] [#3 search-bar with icon] [#4 login/signup buttons]
And if the browser window expands, then #3 expands to fill in the space.
i.e.,
small desktop
[#1][#2][#3][#4]
big desktop
[#1][#2][<#3-------------------------->][#4]
ideally, I'd also like to figure out on mobile (tiny desktop) how to make it:
[#1][#4]
[#3---->]
This is the HTML I have (with other stuff removed to make it simple)
/* General CSS */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding-top: 150px;
padding-bottom: 30px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
line-height: 1.42857143;
margin: 0;
}
ul {
list-style-type: none;
}
.clfix {
display: table;
content: " ";
clear: both;
}
.hide {
display: none;
}
/* Top bar */
.logo-separator {
float: left;
width: 1px;
border-right: 1px dashed #fff;
height: 80px;
padding-left:20px;
}
.navbar {
background-color: #124780;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.navbar .navbar-brand {
text-decoration: none;
float: left;
height: 85px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar .navbar-header {
position: relative;
}
.navbar ul li a, .navbar .navbar-brand {
position: relative;
display: block;
padding: 15px;
line-height: 20px;
color: #fff;
text-decoration: none;
}
.nav.navbar-nav {
float: left;
margin: 50;
padding-left:20px;
color: #fff;
}
.navbar-nav > .separator {
padding: 15px 2px;
line-height: 20px;
}
.navbar-nav .dropdown .dropdown-menu > ul > li.separator {
padding: 5px 10px;
color: #000;
}
.navbar-nav .dropdown .dropdown-menu {
text-align:center;
display: none;
position: absolute;
background: #fff;
border-bottom: 1px solid #124780;
z-index: 999;
}
.navbar-nav .dropdown .dropdown-menu > li:hover > a {
background-color: #8fb4de;
}
.navbar-nav > li {
float: left;
}
/*
.nav.navbar-nav li > a:hover, .nav.navbar-nav > li.open a {
color: #000;
}*/
.top-buttons {
margin: 0;
padding: 0;
float:right;
}
.searchBar {
margin: 0;
padding: 0;
float:right;
border-style:solid;border-width:2px;border-color:#FF0000;
display:inline-flex;
background-color: #124780;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.navbar-nav-button {
display: inline-block;
float:right;
padding-top:18px;
padding-right: 5px;
padding-left: 5px;
}
.top-buttons .btn.btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 7px;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
width: 88px;
text-align: center;
}
.top-buttons .btn.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
font-weight:bold;
}
.top-buttons .btn.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
font-weight:bold;
}
.icon-bar {
background-color: #fff;
}
.navbar-nav2 {
display: inline-flex;
width: 100%;
padding-bottom: 5px;
padding-top: 0px;
position: absolute;
left: 0;
top: 85px;
background: #fff;
height: 35px;
overflow: hidden;
}
.navbar-line {
position: absolute;
bottom:0px;
width: 100%;
height: 1px;
background-color: #000;
left: 0;
}
/* Content */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-50 {
float: left;
width: 50%;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* Panels */
.submenu {
xborder: 1px solid #ebf2f2;
border-radius: 5px;
margin-bottom: 20px;
background-color: #fff;
}
.submenu .panel-heading {
background-color: #24a3d1;
border: 11px solid #ebf2f2;
cursor: pointer;
text-align: center;
border-radius: 25px;
padding: 20px 15px;
}
.submenu .panel-heading.expanded {
border: 11px solid #ebf2f2;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.submenu .panel-heading .fa-plus, .submenu .panel-heading.expanded .fa-minus {
display: block;
}
.submenu .panel-heading.expanded .fa-plus, .submenu .panel-heading .fa-minus {
display: none;
}
.submenu .panel-heading:hover {
background-color: #166988;
}
.submenu .panel-heading .panel-title {
display: inline-block;
margin: 0;
font-size: 20px;
color: #fff;
}
.submenu .panel-heading i.fa {
font-size: 25px;
color: #fff;
}
.submenu .panel-heading i:first-child {
float: left;
}
.submenu .panel-heading i.fa-plus, .submenu .panel-heading i.fa-minus {
float: right;
}
.submenu .panel-body {
padding: 0;
overflow: hidden;
}
.submenu .panel-body.closed {
display: none;
}
.submenu .panel-body ul {
border: 1px solid #ebf2f2;
border-bottom: 12px solid #ebf2f2;
margin: 0;
padding: 0;
}
.submenu .panel-body ul li a {
display: block;
padding: 12px 8px;
color: #000;
/* border-left: 1px solid #24a3d1;
border-right: 11px solid #ebf2f2; */
border-left: 11px solid #ebf2f2;
border-right: 11px solid #ebf2f2;
border-bottom: 1px solid #ebf2f2;
text-decoration: none;
font-size: 16px;
}
.submenu .panel-body ul li a i {
font-size: 12px;
color: #24a3d1;
}
.submenu .panel-body ul li a:hover, .submenu .panel-body ul li a:hover i {
color: #fff;
background-color: #24a3d1;
text-decoration: none;
}
/* Modals */
.modal {
position: fixed;
left: 0;
top: 0;
z-index: 2000;
width: 100%;
height: 100%;
}
.modal-overlay {
position: relative;
left: 0;
top: 0;
background-color: #000;
opacity: .7;
width: 100%;
height: 100%;
}
.modal-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 20px;
padding-right: 20px;
}
.modal-body {
width: 100%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
z-index:1000;
position:relative;
}
.modal-body .modal-row {
width: 100%;
}
.modal-body .close {
background: transparent;
border: 0;
float: right;
font-size: 20px;
color: #aeaeae;
cursor:pointer;
}
.modal-body .button-container {
width: 100%;
height: 30px;
padding: 5px 10px;
}
.modal .modal-title {
font-weight: 700;
text-align: center;
}
.modal .modal-subtitle {
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.modal-body .fields {
padding-top: 20px;
position: relative;
}
.modal-body .input-container {
display: block;
padding: 10px 30px;
font-size: 13px;
}
.modal-body .input {
display: block;
width: 100%;
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.modal-body .button {
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
width: 100%;
}
.modal-body a.forgot {
float: right;
}
.modal-body .button.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.modal-body .button.facebook {
background-color: #3b5998;
color: #fff
}
.modal-body .button.google-plus {
background-color: #d9534f;
color: #fff
}
.modal-body .not-member {
text-align: center;
padding-top: 30px;
}
.modal-body .horizontal-line {
padding-top: 15px;
border-bottom: 2px solid #dedede;
}
.modal-body .bottom-message {
padding: 20px;
text-align: center;
font-size: 13px;
}
.modal-body .bottom-message {
background-color: #f8f8f8;
}
.modal-body .grey {
color: #a19997;
}
.navbar-nav .dropdown-menu > li > a {
color: #fff;
background-color: #4692e6;
text-align:left;
padding: 10px 30px;
border-bottom: 1px solid #fff;
}
.navbar-nav2 a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
top:220px;
}
.navbar-nav2 .custom {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
top:220px;
}
#media (min-width: 768px) {
.container, .modal-body {
width: 750px;
}
.top-buttons {
position: absolute;
top: 10px;
/* i took this out because it was screwing things up display: inline-flex; */
display: inline-flex;
}
.navbar-toggle {
display: none;
}
.navbar-nav > li:hover > a, .navbar-nav > li.active > a {
color: #aeaeae;
}
.navbar-nav > .dropdown {
position: relative;
}
.navbar-nav > .dropdown > .fa-caret-up {
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
color:#4692e6;
display: none;
}
.navbar-nav .dropdown-menu > li > a {
width: 250px;
}
.navbar-nav > li:hover .dropdown-menu, .navbar-nav > li:hover > .fa-caret-up {
display: block;
padding:0;
}
.modal-body .vertical-line {
position: absolute;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
.modal-body .vertical-line .line-color {
width: 1px;
background-color: #eee;
height: 87%;
position: absolute;
left: 50%;
}
.modal-body .vertical-line .vertical-message{
display: block;
margin-top: 75px;
background-color: #fff;
color: #696463;
position: relative;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
#media ( max-width: 767px) {
body {
padding-top: 110px;
}
.navbar {
background-color: #124780;
position: absolute;
}
.separator {
display: none;
}
.modal-body .vertical-line {
display: block;
width: 100%;
float: left;
padding: 10px;
position: relative;
text-align: center;
}
.modal-body .vertical-line .line-color {
position: absolute;
width: 90%;
background-color: #eee;
top: 50%;
height: 1px;
left: 5%;
}
.modal-body .vertical-line .vertical-message{
background-color: #fff;
color: #696463;
position: relative;
}
.logo-separator {
display: none;
}
.navbar {
max-height: 340px;
}
.navbar-nav, .navbar-nav .dropdown-menu, .navbar-nav2 {
display: none;
}
.navbar-nav.open, .navbar-nav .dropdown-menu.open, .navbar-nav2.open {
display: block;
}
.navbar .container {
width: 100%;
padding: 0;
margin: 0;
}
.navbar .container .navbar-header{
position: relative;
width: 100%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #fff;
}
.navbar-nav > .dropdown > .fa-caret-up {
display: none;
}
.navbar-header:before, .navbar-header:after{
content: " ";
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px;
}
.navbar .navbar-nav, .navbar .navbar-nav .dropdown-menu > ul {
margin: 0;
padding: 0;
width: 100%;
}
.navbar .navbar-nav >li>a {
background-color: #78b1eb;
}
.navbar .navbar-nav >li:hover>a {
background-color: #a6c6e6;
}
.navbar .navbar-nav >li>.dropdown-menu {
margin-bottom:0;
margin-top:0;
padding-bottom: 0;
padding-top: 0;
position: relative;
padding-left:0;
}
.navbar .navbar-nav >li>.dropdown-menu>ul>li>a {
color: #fff;
background-color: #aacef2;
text-align:left;
padding: 10px 30px;
border-bottom: 1px solid #fff;
}
.navbar .navbar-nav2 {
padding-top: 0;
position: relative;
top: 0;
height: auto;
}
.navbar .navbar-nav2 a {
display: block;
padding: 10px 15px;
border-bottom: 1px solid #aaa;
}
.navbar .navbar-nav2 a:hover {
background-color: #fff1f1;
color: #5d5aff;
}
.navbar .navbar-nav2 span.separator {
display: none;
}
.navbar ul li {
float: none;
}
.top-buttons {
position: absolute;
top: 10px;
right: 60px;
}
.col-50 {
width: 100%;
}
}
<nav class="navbar">
<div class="container clfix">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<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="#"><img src=./mylogo.jpg><img src=./mytextlogo.gif></a>
<div class="logo-separator"></div>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
Menu Item 1
</li>
<li class="separator">|</li>
<li class="dropdown">
Menu Item 1
</li>
<li class="separator">|</li>
<li class="dropdown">
Menu Item 3
</li>
<li class="separator">|</li>
</ul>
<div class="navbar-nav2">
<div class="navbar-line"></div>
<div class="container" style="width:100%" align=center>
Secondary Menu 1
Secondary Menu 2
</div>
</div>
</div><!--/.nav-collapse -->
//--------------------------------------------------------------------------------------------
/* THIS IS WHERE I WANT A SEARCH BAR WITH ICON TO EXPAND/CONTRACT BASED ON BROWSER WIDTH
//--------------------------------------------------------------------------------------------
<div class=searchBar>
<input name=something type=text width=40><img src=./searchbutton.jpg>
</div>
//--------------------------------------------------------------------------------------------
/* I WANT THESE BUTTONS 'RIGHT' JUSTIFIED HERE
//--------------------------------------------------------------------------------------------
<div >
<ul class="top-buttons" style="width:100%;border-style:solid;border-width:2px;border-color:#FF0000;float:right">
<li class="navbar-nav-button"><Button id="btn-login" class="btn btn-primary btn-sm">Log in</Button></li>
<li class="navbar-nav-button"><Button id="btn-signup" class="btn btn-default btn-sm">Sign Up</Button></li>
</ul>
</div>
</div>
</nav>
any help would be greatly appreciated!
Sounds like you will need judicious use of media queries:
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You've already indicated the three device sizes you need media queries for:
small desktop
[#1][#2][#3][#4]
big desktop
[#1][#2][<#3-------------------------->][#4]
mobile
[#1][#4]
[#3---->]
Now you just need to create media queries for those three sizes and set the CSS accordingly.
Mobile: Hide #2. Maybe play with floats to get #3 to display below the other two.
Big Desktop: Change #3 width (percentage based most likely)
Small Desktop: #1, #2, #3, #4 should all have the same width (percentage based most likely)
You can then use the width property to adjust the size of buttons on these different media widths:
http://www.w3schools.com/cssref/pr_dim_width.asp