Here is my navbar right now (I outlined everything in black):
I want to make the logo and "About Services Contact" go in the center of the navbar vertically (not horizontally) and I don't understand how to do that and why my code hasn't made it like that already, here is my css for the navbar related stuff:
.nav {
width: 100%;
height: 65px;
position: fixed;
/* line-height: 10px; */
text-align: center;
border: 1px solid black;
}
.nav div.logo {
float: left;
width: auto;
/* height: auto; */
padding-left: 2rem;
/* padding-bottom: 3rem; */
border: 1px solid blue;
/* padding-bottom: 0px; */
}
.nav div.logo a {
text-decoration: none;
color: #fff;
font-size: 2.5rem;
}
.nav div.logo a:hover {
color: #00e676;
}
.nav div.main_list {
height: 65px;
float: right;
border: 1px solid purple;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 0;
padding-right: 3rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 2.4rem;
}
.nav div.main_list ul li a:hover {
color: #00e676;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
/* padding-bottom: 20px; */
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
Here is the link to the codepen in which I got the navbar from if more info on the CSS is needed, the CSS is the exact same: https://codepen.io/albizan/pen/mMWdWZ
Just use following styles on the container:
<div class="container" style="display: flex;justify-content:center;">
Related
I'm sorry to ask this question because it has been largely posted, but I checked a lot of links and didn't solve it yet. I have a navbar with 2 elements and I cannot center it in the middle of the nav.
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
Probably in the large number of css elements I'm not able to see where the code is not working.
I posted the code here:
codepen
You should remove the left padding from the main #menu element, set the ul's display to inline-block and the width to auto (just remove the width property).
This will work because the #menu element has text-align: center. the ul will be centered since its width is not 100% (because width is set to auto and the display to inline-block).
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 0; // remove this
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
display: inline-block; // and set this
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
You can use flex positions.
Use property justify-content : center to center all children div inside a parent div. It's useful to distribute the space between or around the elements.
This will also make your CSS code lighter. The more CSS, the more difficult it is.
It's also good for responsive design.
I have also removed some CSS property. This code can be further improved and reduced. Good luck !
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
// padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
// display:block;
// text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
// list-style: none;
// display: block;
text-align: center;
}
#menu ul {
width: 100%;
display: flex;
justify-content: center;
}
#menu li {
// float: left;
margin : 0px;
display: inline;
// position: relative;
}
#menu a {
display: block;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
I'm having trouble making a dropdown menu. My dropdown menu just won't show upon hover, but if I change my display from none to block in .submenu ul li, the dropdown is in the right place.
Can anyone please help me?
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: 'montserrat';
}
.container {
height: 80px;
width: 100%;
background: #34495e;
display: block;
float: right;
}
h1.logo {
font-size: 35px;
font-weight: bold;
color: white;
padding: 0 40px;
line-height: 80px;
float: left;
width: auto;
/* border: 1px red solid; */
}
.logo span {
color: #3498db;
}
nav ul {
float: right;
margin-right: 40px;
/* border: 1px red solid; */
}
nav li {
display: inline-block;
margin: 0 5px;
line-height: 80px;
text-align: center;
/* border: 1px red solid; */
}
nav a {
color: white;
font-size: 18px;
text-transform: uppercase;
padding: 7px 10px;
border-radius: 3px;
}
a.active,
a:hover {
border: 1px solid white;
transition: .5s ease-in;
}
nav #icon {
color: white;
font-size: 30px;
line-height: 80px;
float: right;
margin-right: 40px;
cursor: pointer;
background: #34495e;
border: none;
}
#media (min-width: 980px) {
h1.logo {
font-size: 32px;
padding-left: 60px;
}
nav ul {
margin-right: 20px;
}
nav a {
font-size: 17px;
}
nav #icon {
display: none;
}
div button {
display: none;
}
}
#media(max-width:980px) {
nav #icon {
display: block;
}
nav ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2f3640;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s ease-in;
}
.submenu ul {
top: 100%;
}
nav li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav a {
font-size: 20px;
text-align: center;
}
a.active,
a:hover {
border: none;
color: #3498db;
}
#btn1:hover {
border: none;
color: #3498db;
}
#btn2:hover {
border: none;
color: #3498db;
}
#btn3:hover {
border: none;
color: #3498db;
}
nav ul.show {
left: 0;
}
}
body {
background-image: url('../images/workout.jpg');
background-size: cover;
height: calc(100vh-80px);
}
div .connect {
background: #2f364e;
display: inline-block;
width: auto;
height: auto;
}
#btn1 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn2 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn3 {
background: #2f364e;
color: white;
padding: .5em .7em;
border: none;
font-size: 20px;
margin: 0 5px;
}
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
.submenu ul {
margin: 0;
padding: 0;
}
.submenu li a {
margin: 0;
padding: .5em;
}
.main-nav li :hover .submenu {
display: block;
}
<header>
<nav class="container">
<h1 class="logo">Fitness Fir<span>st</span></h1>
<nav class="navbar">
<div class="main-nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Services
<div class="submenu">
<ul>
<li>Membership</li>
<li>Coaching</li>
</ul>
</div>
</li>
<li>Timetables</li>
<li>Contact</li>
<div class="connect" class="button">
<button id="btn1"><i class="fa fa-facebook"></i></button>
<button id="btn2"><i class="fa fa-instagram"></i></button>
<button id="btn3"><i class="fa fa-twitter"></i></button>
</div>
</ul>
<button id="icon"><i class="fa fa-bars" style="font-size:36px"></i></button>
</div>
</nav>
</nav>
</header>
Issue
In your CSS file, you have only hidden the li elements in your submenu:
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
But here, you're trying to display the .submenu class, rather than the lis inside. In addition, the :hover selector is not attached to the li
.main-nav li :hover .submenu {
display: block;
}
Fix
To fix this we can change the above selector to the below, so that it is now un-hiding the submenu's lis, when you hover over the parent li (Services button)
.main-nav li:hover .submenu li {
display: block;
}
The navbar I created overlaps when I switch my site to a mobile view.
I tried making it fit-content, but it still overlaps. The part that overlaps is the listed items
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline;
padding-top: 23px;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
I expect the navbar items to be side by side but the actual result in them overlapping.
You can use inline-flex for that
change
#navBar ul {
padding: 0;
margin: 0; /* reset margin */
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex; /* change to inline-flex and remove the padding */
position: relative;
}
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
margin: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
it's my first year on coding and i'm doing this for a school Project. We have to do a responsive site and i'm already facing a problem when trying to add a navbar to my site. Whenever i add it, it just goes too much to the left and wont go in the middle. I tried searching google for help but none of them worked so thought i'd register here to ask. Thanks in advance!
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</div>
If you want your menu items centered inside the whole menu bar, just do as #Pete said:
li {
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center; <-----------
}
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</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