I am working on this step by step pattern and I am having some issues aligning the text to be in the middle as you can see here: https://jsfiddle.net/54vtc0n0/
I tried the align-vertical:middle but that did not work for me, maybe I did it wrong? Do any of you have any ideas on how to align this?
Also, I want to link the blue steps to a url so when you click on the validated step it takes you to a page. However it looks like I can't have an href on an li pointing to an outside page. I really need this to link to a url. Does anyone knows a work around.
Thanks in advance
HTML:
<!doctype html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="crumbs">
<ul>
<li class="blue">Start <i class="fa fa-check-circle-o fa-lg" style = "align: right" ></i></li>
<li >About you </li>
<li class= "grey">Plans</li>
<li class= "grey">Details</li>
<li class="grey">Enroll</li>
</ul>
</div>
</div>
CSS:
#crumbs ul {
list-style: none;
display: inline-table;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a {
display: block;
float: left;
background: #3498db;
text-align: rigth;
padding: 25px 15px 0 40px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li a:after {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #009bda;
position: absolute; right: -25px; top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #fff;
position: absolute; left: 0; top: 0;
}
#crumbs ul li:first-child a {
border-top: 0px; border-bottom: 0px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 8px;
padding-bottom: 5px;
border-top-right-radius: 0px; border-bottom: 0px;
}
#crumbs ul li:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-----------------------The non active state-------------------------->
#crumbs ul li.notactive {
display: inline;
}
#crumbs ul li.notactive a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li.notactive a:after {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute; right: -25px; top: 0;
z-index: 1;
}
#crumbs ul li.notactive a:before {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute; left: 0; top: 0;
}
#crumbs ul li.notactive:first-child a {
border-top: 0px; border-bottom: 0px;
}
#crumbs ul li.notactive:first-child a:before {
display: none;
}
#crumbs ul li.notactive:last-child a {
padding-right: 10px;
padding-bottom: 5px;
border-top-right-radius: 0px; border-bottom: 0px;
}
#crumbs ul li.notactive:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-------------------Blue box------------------------->
#crumbs ul li.blue {
display: inline;
}
#crumbs ul li.blue a {
display: block;
float: left;
background: #009bda;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
<!-------------------Grey box------------------------->
#crumbs ul li.grey {
display: inline;
}
#crumbs ul li.grey a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li.grey a:after {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute; right: -25px; top: 0;
z-index: 1;
}
#crumbs ul li.grey a:before {
content: "";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute; left: 0; top: 0;
}
So using this simple tutorial which I googled:
https://css-tricks.com/triangle-breadcrumbs/
I was able to recreate your "breadcrumbs" by changing the colours..
https://jsfiddle.net/54vtc0n0/2/
(Credit goes to author of tutorial: Chris Coyier)
You can use java script to change the active link/tab colour by changing the css for that tab, for example:
HTML
<ul class="breadcrumb">
<li>Start</li>
<li>About you</li>
<li>Plans</li>
<li>Details</li>
<li>Enroll</li>
</ul>
CSS:
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: #009BDA;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #009BDA;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: #D1D1CE; }
.breadcrumb li:nth-child(2) a:after { border-left-color: #D1D1CE; }
.breadcrumb li:nth-child(3) a { background: #D1D1CE; }
.breadcrumb li:nth-child(3) a:after { border-left-color: #D1D1CE; }
.breadcrumb li:nth-child(4) a { background: #D1D1CE; }
.breadcrumb li:nth-child(4) a:after { border-left-color: #D1D1CE; }
.breadcrumb li:nth-child(5) a { background: #D1D1CE; }
.breadcrumb li:nth-child(5) a:after { border-left-color: #D1D1CE; }
.breadcrumb li a:hover { background: #A5A5A5; }
.breadcrumb li a:hover:after { border-left-color: #A5A5A5 !important; }
Also a little advice when formatting your css, each css rule should not be tabbed in.. it is not HTML. Unless you're using something like media queries or SASS when its needed then go ahead.
Your padding is making the text does not centered vertically
So you can adjust it like this:
*{
box-sizing: border-box;
}
#crumbs ul {
display: inline-table;
}
#crumbs ul li {
display:table-cell;
vertical-align: middle;
}
#crumbs ul li a {
display:table-cell;
vertical-align: middle;
float: left;
background: #009bda;
text-align: rigth;
padding: 15px 5px 15px 60px; /*changed*/
position: relative;
/* margin: 0px 0px 5px 0; */
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
height: 50px; /*added*/
}
#crumbs ul li a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #009bda;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content:'';
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #fff;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top: 0px;
border-bottom: 0px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 10px;
padding-bottom: 5px;
border-top-right-radius: 0px;
border-bottom: 0px;
}
#crumbs ul li:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-----------------------The non active state--------------------------> #crumbs ul li.notactive {
display: inline;
}
#crumbs ul li.notactive a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li.notactive a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li.notactive a:before {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li.notactive:first-child a {
border-top: 0px;
border-bottom: 0px;
}
#crumbs ul li.notactive:first-child a:before {
display: none;
}
#crumbs ul li.notactive:last-child a {
padding-right: 10px;
padding-bottom: 5px;
border-top-right-radius: 0px;
border-bottom: 0px;
}
#crumbs ul li.notactive:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-------------------Blue box-------------------------> #crumbs ul li.blue {
display: inline;
}
#crumbs ul li.blue a {
display: block;
float: left;
background: #009bda;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
<!-------------------Grey box-------------------------> #crumbs ul li.grey {
display: inline;
}
#crumbs ul li.grey a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 15px 15px 15px 60px; /*changed*/
position: relative;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
height: 50px;
}
#crumbs ul li.grey a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li.grey a:before {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: 0;
top: 0;
}
<div id="crumbs">
<ul>
<li>Start
</li>
<li class="grey">About you
</li>
<li class="grey">Plans
</li>
<li class="grey">Details
</li>
<li class="grey">Enroll
</li>
</ul>
</div>
Or you can use flexbox like this:
* {
box-sizing: border-box;
}
#crumbs ul {
display: inline-table;
}
#crumbs ul li {
display:table-cell;
vertical-align: middle;
}
#crumbs ul li a {
display: flex;
align-items: center;
float: left;
background: #009bda;
text-align: rigth;
padding-left: 60px; /*changed*/
position: relative;
/* margin: 0px 0px 5px 0; */
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
/* padding-bottom: 5px; */
height: 50px;
}
#crumbs ul li a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #009bda;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content:'';
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #fff;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top: 0px;
border-bottom: 0px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 10px;
/*padding-bottom: 5px;*/
border-top-right-radius: 0px;
border-bottom: 0px;
}
#crumbs ul li:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-----------------------The non active state--------------------------> #crumbs ul li.notactive {
display: inline;
}
#crumbs ul li.notactive a {
display: block;
float: left;
background: #d1d1ce;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
#crumbs ul li.notactive a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li.notactive a:before {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li.notactive:first-child a {
border-top: 0px;
border-bottom: 0px;
}
#crumbs ul li.notactive:first-child a:before {
display: none;
}
#crumbs ul li.notactive:last-child a {
padding-right: 10px;
padding-bottom: 5px;
border-top-right-radius: 0px;
border-bottom: 0px;
}
#crumbs ul li.notactive:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #ed5338;
}
#crumbs ul li a:hover:after {
border-left-color: #ed5338;
}
<!-------------------Blue box-------------------------> #crumbs ul li.blue {
display: inline;
}
#crumbs ul li.blue a {
display: block;
float: left;
background: #009bda;
text-align: rigth;
padding: 25px 15px 0 60px;
position: relative;
margin: 0 0px 5px 0;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-bottom: 5px;
}
<!-------------------Grey box-------------------------> #crumbs ul li.grey {
display: inline;
}
#crumbs ul li.grey a {
/* display: block; */
float: left;
background: #d1d1ce;
text-align: rigth;
padding-left: 60px;
position: relative;
/* margin: 0 0px 5px 0; */
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #fff;
padding-right: 5px;
/* padding-bottom: 5px; */
}
#crumbs ul li.grey a:after {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #d1d1ce;
position: absolute;
right: -25px;
top: 0;
z-index: 1;
}
#crumbs ul li.grey a:before {
content:"";
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: 0;
top: 0;
}
<div id="crumbs">
<ul>
<li>Start
</li>
<li class="grey">About you
</li>
<li class="grey">Plans
</li>
<li class="grey">Details
</li>
<li class="grey">Enroll
</li>
</ul>
</div>
In both case I commented the changed code.
Related
I am new to CSS and I need help to develop step wizard as displayed below. Please provide me pointers to the same.
Here is the sample code that I have tried: https://jsfiddle.net/61peq3d6/1/
.wizard li {
background-color: #fff;
border: solid black 3px;
border-radius: 5px;
display: inline;
padding: 10px 30px 10px 40px;
margin-right: -7px;
width: auto;
color: teal;
}
.wizard li::before,
.wizard li::after {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-color: transparent;
border-left-color: #000;
border-radius: 10px;
}
.wizard li::before {
border-width: 25px;
margin-top: -16px;
margin-left: 84px;
}
.wizard li::after {
border-left-color: #fff;
border-width: 21px;
margin-top: -12px;
margin-left: 24px;
}
.wizard li.selected {
background-color: black;
color: #fff;
}
.wizard li.selected::after {
border-left-color: black;
}
.wizard li:last-child::after {
border-left-color: transparent;
}
<ul class="wizard">
<li>Passo 1</li>
<li class="selected">Passo 2</li>
<li>Passo 3</li>
<li>Passo 4</li>
<li>Fim</li>
</ul>
I am facing issue in aligning the arrow kind of sign.
Got the answer: DEMO
HTML CODE:
<div class="form-wizard centered-pills">
<ul class="nav nav-pills">
<li role="presentation" class="completed">1. Contact Information</li>
<li role="presentation" class="current">2. Product Information</li>
<li role="presentation" >3. Confirmation</li>
</ul>
</div>
CSS:
.form-wizard {
margin: 0 auto;
display: block;
margin-bottom: 25px;
}
.form-wizard .nav li {
box-shadow: 0 5px 3px -3px #ddd;
}
.form-wizard .nav li + li {
margin-left: 0;
}
.form-wizard .nav li:first-child a {
padding-left: 10px;
}
.form-wizard .nav li:last-child a {
border-right: 1px solid #000;
}
.form-wizard .nav li:last-child:after, .form-wizard .nav li:last-child:before {
border-width: 0;
}
.form-wizard .nav li:last-child:hover:after, .form-wizard .nav li:last-child:hover:before {
border-width: 0;
}
.form-wizard .nav li:last-child:hover a {
border-right: 1px solid #000;
}
.form-wizard .nav li a {
border-radius: 0;
padding-left: 30px;
background: #fff;
border: 1px solid #000;
color: teal;
border-right: 0;
}
.form-wizard .nav li a:hover, .form-wizard .nav li a:active, .form-wizard .nav li a:focus {
background: teal;
color: white;
}
.form-wizard .nav li:after, .form-wizard .nav li:before {
content: "";
border-color: transparent transparent transparent #000;
border-style: solid;
border-width: 20px;
position: absolute;
display: block;
top: 0;
z-index: 1;
}
.form-wizard .nav li:after {
border-left-color: #fff;
top: 1px;
right: -39px;
}
.form-wizard .nav li:before {
border-width: 21px;
right: -41px;
}
.form-wizard .nav li.completed a {
border-radius: 0;
padding-left: 30px;
background: #fff;
border: 1px solid #000;
border-right: 0;
color: teal;
cursor: pointer;
}
.form-wizard .nav li.completed:after, .form-wizard .nav li.completed:before {
content: "";
border-color: transparent transparent transparent #000;
border-style: solid;
border-width: 20px;
position: absolute;
display: block;
top: 0;
right: -40px;
z-index: 1;
}
.form-wizard .nav li.completed:after {
border-left-color: #fff;
top: 1px;
right: -39px;
}
.form-wizard .nav li.completed:before {
border-width: 21px;
right: -41px;
}
.form-wizard .nav li.current a {
border-radius: 0;
padding-left: 30px;
background: #000;
border: 1px solid #000;
border-right: 0;
color: white;
cursor: pointer;
}
.form-wizard .nav li.current:after, .form-wizard .nav li.current:before {
content: "";
border-color: transparent transparent transparent #000;
border-style: solid;
border-width: 20px;
position: absolute;
display: block;
top: 0;
right: -40px;
z-index: 1;
}
.form-wizard .nav li.current:after {
border-left-color: #000;
top: 1px;
right: -39px;
}
.form-wizard .nav li.current:before {
border-width: 21px;
right: -41px;
}
.form-wizard .nav li.current:last-child a {
border-right: 1px solid #000;
}
.form-wizard .nav li.current:last-child:after, .form-wizard .nav li.current:last-child:before {
border-width: 0;
}
.form-wizard .nav li.current:last-child:hover:after, .form-wizard .nav li.current:last-child:hover:before {
border-width: 0;
}
.form-wizard .nav li.current:last-child:hover a {
border-right: 1px solid #000;
}
I'm trying to put some bullet points underneath a breadcrumb-style timeline, however I can't figure out how to do it. I have tried this:
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul>
<li><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want</li>
<br>
<li> point here</li>
</ul>
</div>
<div id="crumbs">
<ul>
<li><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
<li><b>STEP 3:</b><br>Mock<br>OSCEs</li>
<li><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring</li>
</ul>
</div>
But it separates one part of the timeline from the rest. I would like the timeline to be together.
Here is the HTML code of the working timeline, without bullet points:
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul class= "point">
<li><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want</li>
<li><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)</li>
<li><b>STEP 3:</b><br>Mock<br>OSCEs</li>
<li><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring</li>
</ul>
</div>
Can someone let me know how I would do this? Thanks.
Here is the CSS:
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height:25px;
}
#crumbs {
text-align: center;
margin-left: em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0px 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height:25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
/* Responsive */
#media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before, #crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
/*Max width for smaller screen size*/
#media (max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before, #crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
I think that put another unsorted list inside of the items, may be what you are looking for:
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul class="point">
<li>
<b>STEP 1:</b>
<ul>
<li>
Sign up and pay for<br>the options<br> you want
</li>
</ul>
</li>
<li>
<b>STEP 2:</b>
<ul>
<li>
Sign up for<br>online sessions<br>(held most weeks)
</li>
</ul>
</li>
...
</ul>
</div>
Add this ruleset to CSS:
.bullet {
font-size: 50px;
color: #000;
text-align: center;
margin: 20px auto;
}
and add this above and under each <li>:
<li class='bullet'>∗</li>
PLUNKER
SNIPPET
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
.bullet {
font-size: 50px;
color: #000;
text-align: center;
margin: 20px auto;
}
/* Responsive */
#media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
}
/*Max width for smaller screen size*/
#media(max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul>
<li class='bullet'>∗</li>
<li><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want
</li>
<li class='bullet'>∗</li>
<li><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
</li>
<li class='bullet'>∗</li>
<li><b>STEP 3:</b><br>Mock<br>OSCEs
</li>
<li class='bullet'>∗</li>
<li><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring
</li>
<li class='bullet'>∗</li>
</ul>
</div>
</body>
</html>
May be below code will help! I have removed media queries form styles to avoid complexity.
There
I have added a nested ul within the main ul list items.
Added a CSS class named "test" to the nested ul. Use a proper name to the class accordingly.
Break the style inheritance from the parent ul by adding !important
Add the styles to make it as a usual unorderd list
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
ul.test {
float: left;
margin-top: 200px;
margin-left: -150px;
}
ul.test li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0px 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
<div id="crumbs">
<ul class="list-unstyled">
<li class="">
<b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want
<ul class="test">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li></li>
<li class="">
<b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
<ul class="test">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li class=""><b>STEP 3:</b><br>Mock<br>OSCEs
</li>
<li class=""><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring
</li>
</ul>
</div>
JSFiddle
I'm trying to display some bullet points under each of the components of this breadcrumb-style timeline. I have gotten the answer to how to put bullets under the timeline while it's full screen but I don't know how to have the points display while the screen is squished or the screen size is smaller. How would I make the points display under each of the parts of the timeline, being responsive? If anyone can help, it would be greatly appreciated.
Here is my code snippet:
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
/* bullet points under timeline */
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
/*-----------------------*/
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
/* Responsive */
#media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
}
/*Max width for smaller screen size*/
#media(max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
<div id="crumbs">
<ul class="list-unstyled">
<li class="">
<b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want
<ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li></li>
<li class="">
<b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
<ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li class=""><b>STEP 3:</b><br>Mock<br>OSCEs
</li>
<li class=""><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring
</li>
</ul>
</div>
Here are pictures of what I would like it to look like:
I tried it using col-xs-3. For larger screens you need to put some tries on it.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
/* bullet points under timeline */
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
/*-----------------------*/
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
/* Responsive */
#media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
}
/*Max width for smaller screen size*/
#media(max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
</style>
<br>
<div id="crumbs">
<ul class="list-unstyled">
<li class="col-xs-3" style="padding:0px;margin:0;">
<b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want
<!-- <ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul> -->
</li>
<li></li>
<li class="col-xs-3" style="padding:0px;margin:0;">
<b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
<!-- <ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul> -->
</li>
<li class="col-xs-3" style="padding:0px;margin:0;"><b>STEP 3:</b><br>Mock<br>OSCEs
</li>
<li class="col-xs-3" style="padding:0px;margin:0;"><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring
</li>
</ul>
</div>
I modified the code Breadcrumbs arrow for working in right to left direction but text not working fine this code in jsfiddle look how text show : jsfiddle.net/tr7th3d2
<style>
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
right: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-right: 1px;
right: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-right: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-right-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-right-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-right-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-right-color: hsla(34,85%,75%,1); }
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-right-color: hsla(34,85%,25%,1) !important; }
</style>
<div id="page-wrap">
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
<li>Vans</li>
<li>Camper Vans</li>
<li>1989 VW Westfalia Vanagon</li>
</ul>
</div>
and this original code :
https://css-tricks.com/triangle-breadcrumbs/
you must change a tag padding
.breadcrumb li a {
padding: 10px 55px 10px 0px;
}
I've been trying to solve this problem for quite some time now. I need my navigation to be responsive. By responsive, i need my nav to still show its links when minimized and dragged to the very left. What my code does now is that the links disappear as if there is no nav bar at all when minimized. Thank you in advance!
Normal view (which is also how i need my nav to look like when minimized)
Current minimized window
Here is my drop down menu code for our CSS:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 800px;
margin: 60px auto;
margin-top: -30px;
margin-bottom: 10px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
background-color: #ffffff;/*bg color of drop down menu*/
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999; /* home my acct etc */
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
#menu li:hover > a { /*font color of nav while hover */
color: #000000;
background: #FFE87C; /* blue */
}
*html #menu li a:hover { /* IE6 only */
color: #000000;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background:#FFE87C; /* bg color ng drop down yellow */
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: auto;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: black; /* font color of drop down */
}
#menu ul a:hover {
background-color: #EDDA74;/*hover of link blue*/
color:#000000;
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #D1D0CE;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #D1D0CE;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#media screen and (max-width: 600px) {
/* nav-wrap */
#menu-wrap {
position: relative;
}
#menu-wrap * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* menu icon */
#menu-trigger {
display: block; /* show menu icon */
height: 40px;
line-height: 40px;
cursor: pointer;
padding: 0 0 0 35px;
border: 1px solid #222;
color: #fafafa;
background-color: #111;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
/* main nav */
#menu {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
background-color: #48CCCD;
display: none;
box-shadow: none;
}
#menu:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
box-shadow: none;
}
#menu ul ul {
margin: 0 0 0 20px !important;
box-shadow: none;
}
#menu li {
position: static;
display: block;
float: none;
border: 0;
margin: 5px;
box-shadow: none;
}
#menu ul li{
margin-left: 20px;
box-shadow: none;
}
#menu a{
display: block;
float: none;
padding: 0;
color: #999;
}
#menu a:hover{
color: #fafafa;
}
#menu ul a{
padding: 0;
width: auto;
}
#menu ul a:hover{
background: none;
}
#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
}
}
I think you should try to set the "html, body" tags in your CSS with min-width: x% / xpx, x being your choice, e.g. min-width: 700px or min-width: 75%