I was rearranging the navigation bar to have an image on the left side and the links on the right, and I some how bugged up my navigation bar.
It's only on two pages that this bug occurs, so I thought maybe because I have different CSS files attached to them. I reviewed the code on both, there's nothing with margins or padding except for the body.
The bar is also fixed
I tried [Gaps at the top and side of navigation bar buttons][1], but didn't help.
I'm sorry ahead of time as it's a lot of code, I appreciate your time
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
.nav-wrapper {
width: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav {
margin-left: auto;
background-color: rgba(255, 255, 255, .8);
border-radius: 0px;
border: none;
margin: 0;
padding: 0;
display: flex;
}
.item {
color: black;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
margin-left: 30px;
margin-right: 30px;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
font-size: 15px;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255, 255, 255, .8);
}
ul {
list-style: none;
padding: 0;
}
* {
text-align: center;
}
body {
margin-top: 150px;
color: #7a9ba6;
font-size: 20px;
}
a body {
color: #90949b;
font-size: 20px;
text-decoration: none;
}
h1 {
font-size: 25px;
color: #415b76;
}
.cyan {
color: cyan;
background-color: #233656;
border-radius: 5px;
padding: 3px;
}
.magenta {
color: magenta;
background-color: #233656;
border-radius: 5px;
padding: 3px;
}
.yellow {
color: yellow;
background-color: #233656;
border-radius: 5px;
padding: 3px;
}
.key {
color: black;
border-radius: 5px;
padding: 3px;
}
<nav class="nav-wrapper">
<a href="index.html" style="margin-left: 75px; margin-top: 7px;">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" align="left" />
</a>
<ul class="nav">
<li class="item has-children">Printing
<!-- <ul class="submenu">
<li>Labels & Stickers</li>
<li>Banners</li>
<li>A-Frame</li>
<li>Menu Boards</li>
<li>Takeout Menus</li>
<li>Business Cards</li>
<li>Dine-In Menus</li>
<li>Posters</li>
<li>Envelopes</li>
<li>Chinese Wedding Cards</li>
<li>Flyers</li>
<li>Letterheads</li>
<li>Brochures</li>
<li>Vinyl</li>
<li>NCR Forms</li>
<li>Catalogues</li>
</ul> -->
</li>
<li class="item has-children">Graphic Design
<!-- <ul class="submenu">
<li>Logo Design</li>
<li>Ads/Flyers/Promotions</li>
<li style="text-align: center;">Menu Boards<br>
(Digital & Boards)</li>
<li style="text-align: center;">Restaurant Menus<br>
(Takeout & Dine-In)</li>
</ul>-->
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Red Packet</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item" style="color: #4D4D4D;">FAQS</li>
<li class="item">Contact Us</li>
</ul>
</nav>
<body>
<h1>What is offset printing?</h1>
Offset printing refer to lithography in general. Which produce the highest quality output of any printing process available today.<br> Because of the fragility nature of the printing plate used in lithography, the process is best suit for short to medium
run jobs.
<h1>What is PMS?</h1>
Pantone Matching System (PMS) is a standard set of color palette that was created to allow a way to describe a color.<br> For more information, see www.pantone.com.
<h1>What is process colors?</h1>
Process colors are <span class="cyan">Cyan</span>, <span class="magenta">Magenta</span>, <span class="yellow">Yellow</span> and <span class="key">Black</span>.<br> By overlapping dot patterns in those 4 colors, about 70% of all the visible colors can
be reproduce.
<h1>What is color matching?</h1>
Since every monitor, graphic card, printer have their own characteristic when displaying color, the colors may look very different in different system.<br> In order to counter those short coming, color matching software is used to calibrate input/output
devises like monitor, scanner, printer etc...<br> For more information, see www.datacolor.com.
<h1>How to send graphic files?</h1>
We accept files in Press Quality PDF format (Hi-Res, CMYK).<br> Make sure you embed all fonts and graphics file you used with your document. A hardcopy print out would be very helpful.
[1]: https://stackoverflow.com/questions/49276641/gaps-at-the-top-and-side-of-navigation-bar-buttons
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
.nav-wrapper {
width: 100%;
position: fixed;
display: flex;
top: 0;
align-items: center;
justify-content: space-between;
}
.nav {
margin-left: auto;
background-color: rgba(255, 255, 255, .8);
border-radius: 0px;
border: none;
margin: 0;
padding: 0;
display: flex;
}
.item {
color: black;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
margin-left: 30px;
margin-right: 30px;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
font-size: 15px;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255, 255, 255, .8);
}
ul {
list-style: none;
padding: 0;
}
* {
text-align: center;
}
body {
margin-top: 150px;
color: #7a9ba6;
font-size: 20px;
}
a body {
color: #90949b;
font-size: 20px;
text-decoration: none;
}
h1 {
font-size: 25px;
color: #415b76;
}
.cyan {
color: cyan;
background-color: #233656;
border-radius: 5px;
padding: 3px;
}
.magenta {
color: magenta;
background-color: #233656;
border-radius: 5px;
padding: 3px;
}
.yellow {
color: yellow;
background-color: #233656;
border-radius: 5px;
padding: 3px;
}
.key {
color: black;
border-radius: 5px;
padding: 3px;
}
<nav class="nav-wrapper">
<a href="index.html" style="margin-left: 75px; margin-top: 7px;">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" align="left" />
</a>
<ul class="nav">
<li class="item has-children">Printing
<!-- <ul class="submenu">
<li>Labels & Stickers</li>
<li>Banners</li>
<li>A-Frame</li>
<li>Menu Boards</li>
<li>Takeout Menus</li>
<li>Business Cards</li>
<li>Dine-In Menus</li>
<li>Posters</li>
<li>Envelopes</li>
<li>Chinese Wedding Cards</li>
<li>Flyers</li>
<li>Letterheads</li>
<li>Brochures</li>
<li>Vinyl</li>
<li>NCR Forms</li>
<li>Catalogues</li>
</ul> -->
</li>
<li class="item has-children">Graphic Design
<!-- <ul class="submenu">
<li>Logo Design</li>
<li>Ads/Flyers/Promotions</li>
<li style="text-align: center;">Menu Boards<br>
(Digital & Boards)</li>
<li style="text-align: center;">Restaurant Menus<br>
(Takeout & Dine-In)</li>
</ul>-->
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Red Packet</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item" style="color: #4D4D4D;">FAQS</li>
<li class="item">Contact Us</li>
</ul>
</nav>
<body>
<h1>What is offset printing?</h1>
Offset printing refer to lithography in general. Which produce the highest quality output of any printing process available today.<br> Because of the fragility nature of the printing plate used in lithography, the process is best suit for short to medium
run jobs.
<h1>What is PMS?</h1>
Pantone Matching System (PMS) is a standard set of color palette that was created to allow a way to describe a color.<br> For more information, see www.pantone.com.
<h1>What is process colors?</h1>
Process colors are <span class="cyan">Cyan</span>, <span class="magenta">Magenta</span>, <span class="yellow">Yellow</span> and <span class="key">Black</span>.<br> By overlapping dot patterns in those 4 colors, about 70% of all the visible colors can
be reproduce.
<h1>What is color matching?</h1>
Since every monitor, graphic card, printer have their own characteristic when displaying color, the colors may look very different in different system.<br> In order to counter those short coming, color matching software is used to calibrate input/output
devises like monitor, scanner, printer etc...<br> For more information, see www.datacolor.com.
<h1>How to send graphic files?</h1>
We accept files in Press Quality PDF format (Hi-Res, CMYK).<br> Make sure you embed all fonts and graphics file you used with your document. A hardcopy print out would be very helpful.
enter code here
Just add top:0 to `.nav-wrapper
Look good here. gap is gone
i can see body with margin-top of 150px;
body {
margin-top: 150px;
color: #7a9ba6;
font-size: 20px;
}
that might be the problem
I'm not sure if I clearly understand what you want to achieve.
If you want the navigation bar to be fixed at the top all the time. You can probably put top: 0 to the .nav-wrapper which has position: fixed otherwise it's going to be set at the same place as its parent which is the body that has margin-top: 150px
https://codepen.io/krugtep/pen/GLyvLW
The nav is a child of the body, so even with position: fixed; you have to set top: 75px or whatever distance you want the element to be from the top of the page. Otherwise it's affected by the body margin-top.
Related
I have been trying to make the colour fill the entire dropdown relative to the text you are hovering but it is not filling the whole div element, only the space around the word.
I have created a Fiddle to show the issue that I am having. I'm a beginner in CSS and HTML.
As you can see I have tried to add padding but it is not filling the div element as you hover it.
THE HTML is provided below and also within the Fiddle
header {
display: flex;
justify-content: space-evenly;
align-items: center;
padding-top: 1.0rem;
}
.sub-1 {
display: none;
}
.sub-1 ul {
display: flex;
flex-direction: column;
gap: 2rem;
padding-right: 4rem;
padding-left: 1rem;
margin-left: -9.5rem;
height: 27.5rem;
font-size: 1.6rem;
background-color: white;
list-style: none;
}
.sneakers {
margin-top: 2rem;
}
.sub-1 a:link,
.sub-1 a:visited {
color: black;
text-decoration: none;
}
.sub-1 a:hover {
padding: 10px;
background-color: blue;
}
li:hover .sub-1 {
display: block;
position: absolute;
margin-left: -2rem;
box-shadow: 1px 1px 10px grey;
}
.search-txt {
border: none;
outline: none;
padding-top: 1.0rem;
padding-left: 1.0rem;
font-size: 1.5rem;
color: black;
}
.search-nav {
display: flex;
font-size: 1.6rem;
list-style: none;
gap: 2.0rem;
margin-left: -7.0rem;
margin-top: -0.5rem;
caret-color: transparent;
}
<header class="header">
<body>
<div class="navbar">
<ul class="search-nav">
<li><a class="main-nav-link" href="#browse">Browse</a>
<div class="sub-1">
<ul class="">
<li class="sneakers">Sneakers
</li>
<li>Apparel</li>
<li>Electronics</li>
<li>Trading Cards</li>
<li>Collectibles</li>
<li>Accessories</li>
<li>NFTs</li>
</ul>
</div>
</li>
<li><a class="main-nav-link" href="#news">News</a></li>
<li><a class="main-nav-link" href="#help">About</a>
</li>
<li><a class="main-nav-link" href="#account">My Account</a></li>
<li><a class="main-nav-link sell" href="#sell">Sell</a></li>
</ul>
</div>
</header>
Fiddle
if i understand correctly the wrapper div with the sub-1 class is unnecessary. If you remove that div and add that class to the ul below it
<li><a class="main-nav-link" href="#browse">Browse</a>
<ul class="sub-1">
<li class="sneakers">Sneakers
</li>
<li>Apparel</li>
<li>Electronics</li>
<li>Trading Cards</li>
<li>Collectibles</li>
<li>Accessories</li>
<li>NFTs</li>
</ul>
Then in your css add a background-color
li:hover > .sub-1{
display: block;
position: absolute;
margin-left: -2rem;
box-shadow: 1px 1px 10px grey;
background: red;
}
I hope this helps, cheers!
I am a fresh newcomer and I have been studying and practising flexbox and CSS, just now I was trying to move my float elements into flexbox, but for a reason, I don't know my menu is broken I see the drop-down menu items upper the hamburger button, I would be happy if someone could explain what I am doing bad, thank you in advance. Here is the code:
.header {
background-color: #fff;
position: fixed;
text-align: center;
height: 50px;
width: 100%;
max-width: 480px;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
z-index: 3;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
flex: 1;
}
.header .logo {
/*float: right; */
display: block;
font-size: 1em;
padding: 20px 20px;
color: #000;
display: inline-block;
}
.header .logo img {
height: 12px;
width: 12px;
}
.header .mail {
/* float: right; */
display: block;
font-size: 1em;
padding: 20px 20px;
color: #000;
display: inline-block;
}
.header .mail img {
height: 15px;
width: 19px;
}
.header .menu-item {
font-size: 1em;
color: #000;
padding-top: 30px;
line-height: 2.5em;
}
.header .menu-sub-item {
font-size: 1em;
color: #c4c0bf;
line-height: 2.5em;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
display: flex;
}
<header class="header">
<img src="" alt="">
<img src="" alt="">
<input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<hr>
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<hr>
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
</ul>
</header>
[as you see, the menu has reduced his size and the drop down went up after moving all elements into flexbox, before the menu cover his width and drop down cover all the background]
Trying to change my navigation code from hover to click as I've realized there's no "hover" on mobile. I tried searching if there's such thing as :click in CSS, but closest I've found is :target, which doesn't do the same thing as clicking.
I'm just looking for advice for the most efficient way to change the code I have now to make it clickable.
.nav {
position: sticky;
left: 0;
background-color: rgba(255,255,255,.8);
border-radius: 0px;
border: none;
width: 100%;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
font-size: small;
left: 0;
right: 0;
text-transform: capitalize;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: left;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
</a>
</li>
<li class="item has-children">Printing
</li>
<li class="item has-children" style="color:#4D4D4D;">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Lucky Money Envelopes</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">Contact Us</li>
</ul>
Try this with using jQuery [change ".item.has-children:hover .submenu" with "submenuActive" and add js(jQuery) code]:
$(document).ready(function() {
var countClick = 0;
$( "ul.nav li.has-children" ).click(function() {
countClick = countClick + 1;
if (countClick %2 == 0) {
$(this).children('.submenu').addClass('submenuActive');
}
else
{
$(this).children('.submenu').removeClass('submenuActive');
}
});
$( "ul.nav li.has-children" ).mouseleave(function() {
countClick = 0;
$(this).children('.submenu').removeClass('submenuActive');
});
});
.nav {
position: sticky;
left: 0;
background-color: rgba(255,255,255,.8);
border-radius: 0px;
border: none;
width: 100%;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
font-size: small;
left: 0;
right: 0;
text-transform: capitalize;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: left;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.submenuActive {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
</a>
</li>
<li class="item has-children">Printing
</li>
<li class="item has-children" style="color:#4D4D4D;">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Lucky Money Envelopes</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">Contact Us</li>
</ul>
If I understand correctly, CSS property "Active" is what you want to achieve?
https://www.w3schools.com/cssref/sel_active.asp
Maybe you are looking for pseudo-clase CSS :focus-within
https://developer.mozilla.org/es/docs/Web/CSS/:focus-within
You can as well use JavaScript by:
`var all = document.querySelectorAll(".item.has-children");
all.forEach(function (e) {
addEventListener('click', function (){
e.classList.remove('submenu');
e.classList.add('newMenu');
})
})`
then change the .item.has-children:hover .submenu to a different class. In my case I used newMenu. Populate the newMenu class with your desired style.
The nav bar and submenu are perfectly aligned when the view port is full width of the screen. However, when I get to 720px where the nav item "Chinese Calendars" becomes two lines, it creates a gap between the nav bar and the submenu drop down.
I've tried shifting code around and removing things, but can't figure it out. I tried float: right;, creates an overlap instead of falling right below.
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 0;
}
.nav {
position: sticky;
left: 0;
background-color: rgba(255, 255, 255, .8);
border-radius: 0px;
border: none;
width: 100%;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
margin-top: 29px;
align-items: center;
align-text: center;
position: absolute;
padding: 10px;
font-size: small;
left: 0;
right: 0;
text-transform: capitalize;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: left;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.submenuActive {
display: flex;
cursor: pointer;
align-items: center;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255, 255, 255, .9);
}
/*.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}*/
ul {
list-style: none;
padding: 0;
}
.logo {
display: block;
margin-top: 50px;
margin-bottom: 25px;
}
.logo img {
display: block;
margin: auto;
max-width: 70%;
}
<a class="logo" href="index.html">
<img src="../../Images/Navigation/Intak Logo 40px High.png" alt="Home" />
</a>
<nav>
<ul class="nav">
<li class="item">
<a href="../index.html">
<img src="../../Images/Navigation/Intak Nav Mark -01.png" alt="Home" />
</a>
</li>
<li class="item has-children">Printing
<!-- <ul class="submenu">
<li>Labels & Stickers</li>
<li>Banners</li>
<li>A-Frame</li>
<li>Menu Boards</li>
<li>Takeout Menus</li>
<li>Business Cards</li>
<li>Dine-In Menus</li>
<li>Posters</li>
<li>Envelopes</li>
<li>Chinese Wedding Cards</li>
<li>Flyers</li>
<li>Letterheads</li>
<li>Brochures</li>
<li>Vinyl</li>
<li>NCR Forms</li>
<li>Catalogues</li>
</ul> -->
</li>
<li class="item has-children">Graphic Design
<!-- <ul class="submenu">
<li>Logo Design</li>
<li>Ads/Flyers/Promotions</li>
<li style="text-align: center;">Menu Boards<br>
(Digital & Boards)</li>
<li style="text-align: center;">Restaurant Menus<br>
(Takeout & Dine-In)</li>
</ul>-->
</li>
<li class="item has-children" style="color:#4D4D4D;">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Lucky Money Envelopes</li>
<li>More Calendars</li>
</ul>
</li>
<!-- <li class="item">FAQS</li> -->
<li class="item">Contact Us</li>
</ul>
</nav>
I need it so regardless of viewport size, the submenu is always touching the navigation bar
https://jsfiddle.net/nqjv3xs5/1/#&togetherjs=lgy6QvwL4g
Greater than 720px:
Less than 720px:
I want to make a flex-box layout where it looks like this:
I got the first 3 to look okay, then the next one isn't laying out well, not showing the text, and having a weird black background I can't figure out how to get rid of in CSS.
If I were to keep adding services and stuff to the first flex box structure, will it wrap automatically? When I used the flex-wrap command, it took the box display and stretched it out, and things went out of sorts.
here's the fiddle https://jsfiddle.net/b03q4zzc/
.container {
display: flex;
width: 100%;
height: 500px;
background-color: #fff
/* Make the parent a flex containter */
}
.container-two {
display: flex;
width: 100%;
background-color: #fff;
overflow: hidden;
}
.services {
flex: 1;
padding: 1em;
}
.service {
flex: 1;
/* Distribute free space among flex items */
padding: 1em;
}
h1 {
text-align: center;
display: block;
margin-top: 100px;
}
.service ul {
background-color: #fff;
overflow: hidden;
}
.service li{
list-style-type: circle;
text-align: left;
font-color: white;
max-height: 100px;
min-height: 50px;
max-width: 300px;
min-width: 200px;
}
.service--one h4, a {
text-align: left;
text-decoration: none;
color: red;
}
.service--one a:hover {
color: blue;
text-shadow: 0px 0px 3px white, 0px 0px 5 white;
}
.services--one {
background: #fff
}
.services--two {
background: #fff
}
.service h3 {
text-align: center;
}
.services p {
width: 200px;
display: block;
background: #fff
}
.service h6 {
width: 200px;
}
h5 {
margin-left: 25px;
display: inline-block;
text-align: center;
color: red;
}
.service {
margin-top: 50px;
margin-left: 0px;
display: inline-block;
flex: 1; /* Distribute free space among flex items */
padding: 1em;
}
.service h3 {
flex: 1;
text-align: center;
}
.service h5 {
text-align: center;
color: red;
}
.service--one h5 {
font-style: italic;
}
<ul class="container">
<li class="service service--one">
<h3>Business Services</h3>
<ul>
<li>Logo Design</li>
<li>Business Card Design</li>
<li>Letterhead Design</li>
<li>Namebadge Design</li>
<li>Signage and Window Decals</li>
<li>Pamphlets, Brochures, Menus and other business forms</li>
<li>Promotional Product Design</li>
</ul>
</ul>
</li>
<li class="service service--two">
<h3>Sports Services</h3>
<ul>
<li>Team Logo Design</li>
<li>Sellable Merchandise and Apparel Design</li>
<li>Promotional Product Design</li>
<li>Program Design</li>
</ul>
</li>
<li class="service service--three">
<h3>Personal Services</h3>
<ul>
<li>Wall Art</li>
<li>Slideshow Design</li>
<li>Custom Creations</li>
</ul>
</li>
</ul>
<ul class="container-two">
<h2>Popular Packages Include</h2>
<li class="services services--one">
<ul>
<li>"Start Me Up" <strong>$200.00</strong></li>
<p>This package includes <strong>Logo Design, Business Card Design,
Letterhead Design and Invoice Design</strong>.
This package is perfect for the start up, or someone reinventing their
company.</p>
<li class="services services--two"
<li>"Make Me A Brand" <strong>Buy 3 promotional product designs, get 2
free*</strong></li>
<p>This package is for the company that wants marketable merchandise.
These promotional products are great to hand out
at fairs and other events to get your name out there.
<h6>*Any promotional product utilized for sales and profit <i>
<strong>MAY</strong></i> fall under our
guidelines for "Royalties", and may be subject to royalties to Dave's
Logo Designs. For more information if your project would
fall under these guidelines, please <a href="contact.html">Contact
Us</a>.</h6></p>
<li>"Go Team Go" <strong>$250.00</strong></li>
</ul>
</li>
</ul>
<div class="footer">
<footer><h6>Some restrictions apply, contact us for more details.</h6>
<ul>
<h2>Find us on:</h2>
<li><a href="http://www.twitter.com/daveslogodesign" target="_blank"><img
src="https://s19.postimg.org/3tbo98443/twitter.png" height="25px"
width="25px" alt="twitter"></img>Twitter</a></li>
<li><a href="http://www.facebook.com/daveslogodesigns" target="_blank">
<img src="https://s19.postimg.org/amc15huxf/facebook.png" height="25px"
width="25px" alt="facebook"></img>Facebook</a></li>
<li><a href="http://www.linkedin.com/daveslogodesigns" target="_blank">
<img src="https://s19.postimg.org/t4kz3h237/linkedin.png" alt="linkedin"
height="25px" width="25px"></img>Linkedin</a></li>
<li><a href="http://www.skype.com/daveslogodesignd" alt="skype"
target="_blank"><img src="https://s19.postimg.org/y9hl7cpn7/skype.png"
height="25px" width="25px"></img>Skype</a></li>
<li><a href="https://www.instagram.com/daveslogos/"><img
src="https://s19.postimg.org/it8matadv/instagram.png" alt="instagram"
height="25px" width="25px"></img>Instagram</a></li>
<li><img>
</li>
</ul>
maybe something I'm doing is wrong. Thanks for the help.