This question already has answers here:
What is a clearfix?
(10 answers)
background color in css not showing up
(2 answers)
Closed 1 year ago.
There is a logo in the bottom right, which I removed the link because it will not get the image due to where its located. Aside from that, the background behind it and the <div class="green"></div>is supposed to be colored with #104723; but it will not apply it?? Why is that?
I applied the color style as well as the background-color style and nothing happens, even if I include the !important tag.
.green{ color: #104723;}
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
padding: 0px auto;
margin: 0px auto;
height: auto;
min-height: 10%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#MSOZone {
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
line-height: 0;
font-size: 0;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
display: block;
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.ms-wpContentDivSpace {
height: auto !important;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.ms-webpartPage-root{
border-spacing:0px!important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
#contentRow {
width: 101%;
}
.flexbox-container {
margin-top: -30px;
width: 100%;
height: 100%;
}
html, body {margin: 0; height: 100%; overflow-x: hidden !important; overflow-y: hidden !important;}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Projects Landing Page</title>
<link rel="stylesheet" href="css/site.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Active Projects Site</h1>
<h1 class="gold">Going Beyond</h1>
<div class="selector">
<a href="" target="_blank" class="btnselect">USMC Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
Contract 2
Contract 3
Contract 4
</div>
</div>
<div class="selector">
<a href="" target="_blank" class="btnselect">Army Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
Contract 2
Contract 3
Contract 4
Contract 5
Contract 6
</div>
</div>
<div class="selector">
<a href="" target="_blank" class="btnselect">DoD Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
</div>
</div>
</div>
</div>
<div class="green">
<img src="" class="logo"/>
</div>
</body>
<script>
document.getElementsByTagName('title')[0].innerText = "Projects Landing";
</script>
</html>
.green{ color: #104723;}
sets the text color to green. There's no text in that div, so you don't see a change.
.green{ background-color: #104723; }
sets the background color to green, which is probably what you want.
Additionally, if the div takes up no space, none of this will make a difference. You'll want to make sure there's visible content in it too -- an img with no source is not that.
Use backgound-color to apply color in backgrounds.
Related
I want my website to be responsive and adjust to any device. I'm using glitch.com to create this website. For example on mac os, when I set my website to full screen there is a scrolling bar even thought I don't want there to be one. How can I achieve a responsive website? I've tried scaling my website down when on different devices but it wont work. Also, I provided some images and code below (including my website).
Website:
https://runturtle.glitch.me/
Code:
#import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#fname {
margin-bottom: 10px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
* {
font-family: "Rubik";
user-select: none;
}
form {
margin: auto;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #a0a0a0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
h1 {
align-items: center;
}
h3 {
color: #dde6d8;
}
input {
margin: 0 auto;
border: none;
color: black;
background-color: rgb(white);
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.dashboard {
width: 150px;
height: 800px;
position: absolute;
left: 10px;
top: 81px;
}
.home {
opacity: 1;
width: 150px;
}
article {
background: #131b0b;
width: 50%;
margin: 20px auto;
border-radius: 10px;
padding: 10px;
}
hr,
article .date {
color: #a0a0a0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Run Turtle</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img
src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px"
/>
<h1><strong>Run Turtle</strong></h1>
</header>
<main>
<article class="dashboard">
<h1>Dashboard</h1>
<hr />
<button
onClick="window.location.href='https://runturtle.glitch.me';"
class="home"
>
Home
</button>
<br />
<br />
<button
onClick="window.location.href='register.html';"
class="register"
>
Register
</button>
</article>
<article>
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</article>
</main>
<script src="index.js"></script>
</body>
</html>
Here's an image of when the browser is resized:
You can use the Bootstrap Grid System for a responsive website. The layout is in the form of rows and columns that can be adjusted depending on the device size.
Here's the documentation link.
Personally, I like AMP (Accelerated Mobile Pages.) I myself use it for my site and it works good with page layouts.
AMP has a page on how to set up your HTML document to make a responsive mobile page. Here is the article
I suggest you to follow #media rule. CSS Grid Layout Module will help you to solve the arisen problem. For an example I have put a solution code.
screenshot_1 screenshot_2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.menu {
float: left;
width: 25%;
text-align: center;
}
.menu article {
background-color: #1f2215;
padding: 8px;
height: 800px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
input {
margin: 0 auto;
border: none;
color: black;
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
#media only screen and (max-width: 620px) {
.menu,
.main {
width: 100%;
}
.menu {
height: 200px;
}
.main {
background: #1f2f15;
height: 600px;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div>
<header>
<img src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px" />
<h1><strong>Run Turtle</strong></h1>
</header>
</div>
<div>
<div class="menu">
<article>
<h1>Dashboard</h1>
<hr />
<button>
Home
</button>
<br />
<br />
<button>
Register
</button>
</article>
</div>
<div class="main">
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</div>
</div>
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
I'm trying to re-create Google's home page to try and improve my very basic skills. I'm trying to apply word spacing to the links in the navbar (Gmail & Images) but I can't get it to work. Can anyone point out where I'm going wrong?
I've just realised list-style-type: none; hasn't altered anything either.
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border: 1px solid lightgray;
outline: none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight: bold;
}
.divider {
width: 10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
list-style-type: none;
word-spacing: 30px;
}
<nav>
<div class="nav-wrapper">
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
padding-left would work fine.
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border:1px solid lightgray;
outline:none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight:bold;
}
.divider {
width:10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<ul>
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
</body>
</html>
Don't Required:
word spacing
<div class="dividerTwo"></div>.
Do only :
Apply some padding around .nav-wrapper a
.nav-wrapper a {
float: right;
list-style-type: none;
padding:0 .5em;
}
In this scenario you should use margin CSS property instead of word-spacing. The end CSS rule would look as follows:
.nav-wrapper a {
float: right;
list-style-type: none;
margin-left: 15px;
}
I am having an issue with the second level menu only in Safari. Top level and submenu work fine on mouse hover on chrome, firefox etc but when opened in Safari, only first menu is opening on hover. I have already tried other solutions available here and on other forums but it's still same.
.nav {
margin: 2% 10% 0 35%;
/*margin-bottom: 4px;
margin-top: 2%;
margin-left: 35%;
margin-right: 10%;*/
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family:"Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {
/*padding-left: 30px;*/
padding-left: 0px !important;
margin-left: 30px;
}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
margin-left: -200px;
margin-top: -50px;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
margin-left: 200px !important;
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css"/>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have included the HTML and CSS code for the menu. I have also checked it on chrome using windows OS, and it works but the only issue is with safari browser.
There are a couple of suggestions I have that may help.
Firstly, I would not recommend using position: fixed; to position your submenus because fixed is a position relative to the browser window. You likely want the submenus to be positioned according to the parent, not the window.
Secondly, you have overflow: hidden; on .navbar-nav, which means anything that falls outside the borders of it should be invisible - which would include your submenus.
Here is a JSFiddle with a working example of your snippet with my suggestions, tested and working in Safari:
.nav {
margin: 2% 10% 0 35%;
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family: "Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: relative;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: absolute;
top: 0;
left: 100%;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/m59vk802/4/
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">