Hello so recently I've been building my personal website and been having troubles with my mobile view of my website.
The Problem : On a mobile device there is Unwanted White Space On Top Of Page (In nav Area). It basically covers the navbar.
Solutions : I've tried manipulating code, and seeing what could be causing this but no solution. Also used DevTools on google and it seems as if it won't show the top white space but only on the phone?
Nav HTML Code :
<!-- NAVIGATION -->
<nav>
<div class="logo"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></div>
<div class="openMenu"><i class="fa fa-bars" style="color:black;"></i></div>
<ul class="mainMenu">
<!-- Center-aligned links -->
<div class="nav-center">
<div class="navLogo"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></div>
</div>
<!-- Left-aligned links -->
<li>Contact</li>
<li>About</li>
<li>Store</li>
<div class="closeMenu"><i class="fa fa-times"></i></div>
<!-- Right-aligned links -->
<div class="nav-right">
<span class="icons">
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-discord"></i>
</span>
</div>
</ul>
</nav>
Nav CSS Code :
/* Nav BAR */
nav {
position: relative;
background: rgb(255, 255, 255);
color: #fff;
display: flex;
justify-content: space-between;
height:fit-content;
overflow: hidden;
width:100%;
}
/* Nav Main Menu */
nav .mainMenu {
display:flex;
list-style: none;
}
/* Centered section inside the top navigation */
.nav-center{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.nav-right {
position:absolute;
float: right;
right:-100px;
top:50%;
transform: translate(-50%, -50%);
}
nav .mainMenu li a {
display: inline-block;
padding: 30px;
margin:10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 1.5rem;
font-family:'Courier New', Courier, monospace;
}
nav .mainMenu li a:hover {
color: rgb(0, 110, 255);
}
nav .openMenu {
font-size: 2rem;
margin: 20px;
display: none;
cursor: pointer;
}
nav .mainMenu .closeMenu , .icons i {
font-size: 2rem;
display: none;
cursor: pointer;
}
nav .logo {
margin: 6px;
font-size: 25px;
cursor: pointer;
display:none;
}
.icons i {
display: inline-block;
padding: 12px;
color:black;
}
Website - https://github.com/ConstantineLinardakis/TwinPlayzOfficial https://constantinelinardakis.github.io/TwinPlayzOfficial/index.html
Any idea why this is happening? Could It be because of the Nav?
I don't think it has to do with your body margin because the margin is set to 0 when I am inspecting your website. With that being said, perhaps your problem is due to using height: fit-content; I would suggest using a fixed height.
nav {
position: relative;
background: rgb(255, 255, 255);
color: #fff;
display: flex;
justify-content: space-between;
height: 33.5vh; /* Change applied */
overflow: hidden;
width: 100%;
}
The brower's style sheet setting a margin to your <body> element by default is the culprit.
CSS fix removing browser styles default <body> margin (e.g.: 8px in Firefox):
body {
margin: 0;
}
Related
i don't understand hover really well, can someone tell me how to hover this footer properly? i want the text to glow with hover but instead the hover is glowing not only the text. there's also a problem with some logo's for the facebook etc. this is the code i tried. also can someone drop a link for the logo's? i think i lost the link n that's why the logo's wont appear.
body {
margin: 0;
overflow-x: hidden;
}
.footer {
background: #000;
padding: 30px 0px;
font-family: 'Play', sans-serif;
text-align: center;
}
.footer .row {
width: 100%;
margin: 1% 0%;
padding: 0.6% 0%;
color: gray;
font-size: 0.8em;
}
.footer .row a {
text-decoration: none;
color: gray;
transition: 0.5s;
}
.footer .row a:hover {
color: #fff;
}
.footer .row ul {
width: 100%;
}
.footer .row ul li {
display: inline-block;
margin: 0px 30px;
}
.footer .row a i {
font-size: 2em;
margin: 0% 1%;
}
#media (max-width:720px) {
.footer {
text-align: left;
padding: 5%;
}
.footer .row ul li {
display: block;
margin: 10px 0px;
text-align: left;
}
.footer .row a i {
margin: 0% 3%;
}
}
<footer>
<div class="footer">
<div class="row">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-twitter"></i>
</div>
<div class="row">
<ul>
<li>Contact us</li>
<li>Our Services</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
<li>Career</li>
</ul>
</div>
<div class="row">
Company name || lorem
</div>
</div>
</footer>
I think you could use text-shadow.
That's how I did it to glow green-ish :
text-shadow: 0 0 7px rgb(190 254 194), 0 0 122px rgb(173 236 175);
You can just add it to the hover pseudoclass
Hope it's help!
You might be missing the dependency required for the visibility of your logo. As your code seems to be using "Font awesome" kindly use its CDN or install it in your project then it will work fine.
Link to font awesome - https://fontawesome.com/v4/get-started/
And changing color when we are hovering text seems to be fine with your code snippet.
i was working on a nav menu based around a code from w3school- it was a fixed 100% width sidebar navigation menu. after adjusting it a bit i decided i wanted it to not be 100& and to be next to my other main body div.
But after adjusting it to be in the right place, the text/nav links are in a line and not on seperate lines as they had just been a moment before. i am having trouble understanding why, and what i can do to fix it.
Image of what i mean:
https://imgur.com/c4qL0iT
below is the code for the sidebar (i can provide for the other divs too but i think its just the sidebar that is the problem?)
"Old code" is the original code for the full size sidebar.
/* DROPDOWN SIDEBAR STUFF */
.sidenav {
/* OLD CODE
background-color: rgba(0,109,165, .8);
font-size: 14px;
border: 5px dashed rgba(0,208,129);
color: #5afba2;
text-align: left;
font-family: monospace;
border-radius: 10px;
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
padding-top: 20px;
*/
background-color: rgba(0,109,165, .8);
font-size: 14px;
border: 3px dashed rgba(0,208,129);
border-radius: 10px;
color: #5afba2;
font-family: monospace;
overflow-y: auto;
overflow-x: hidden;
display: flex;
float:left;
justify-content: space-between;
height: 700px;
width: 200px;
box-sizing: border-box;
margin-left: 300px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 25px;
position: ansolute;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 18px;
font-family: monospace;
color: #5afba2;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
.dropdown-btn {
font-size:22px;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: white;
}
/* Add an active class to the active dropdown button */
.active {
background-color: none;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: none;
padding-left: 8px;
font-size:12px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
/* Some media queries for responsiveness */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
and the HTML for the sidebar
<div class="sidenav">
<button class="dropdown-btn">GENERAL
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
link
link
link
</div>
<button class="dropdown-btn">FANDOM
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
link
link
link
</div>
<button class="dropdown-btn">ORIGINAL
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
link
link
link
</div>
<button class="dropdown-btn">SUPPORT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
link
link
link
</div>
<button class="dropdown-btn">OUTGOING
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
link
link
link
</div>
</div>
let me know if anymore information is needed.
"display: flex;" is making all inside of class "sidenav" display in a line. You can learn more about display flex here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
I have tried to embed a vertical menu bar on my Blogger website. But it seems like it's not responsive and the colour is not matching my website.
I need to remove the shadow and make the website responsive in mobile.
My website's background colour is white: https://codemyquestion.blogspot.com/
This is how it is opened:
This is the expected output:
Below is the code:
<style>
.ddsmoothmenu-v ul {
margin: 0;
padding: 0;
width: 130px;
/* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 0px solid #ccc;
}
.ddsmoothmenu-v ul li {
position: relative;
}
.downarrowclass {
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass {
position: absolute;
top: 10px;
right: 5px;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a {
display: block;
overflow: auto;
/*force hasLayout in IE7 */
height: 32px;
color: white;
text-decoration: none;
padding: 5px 5px 5px 25px;
border-bottom: 0px solid #778;
border-right: 0px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
color: white;
background-image: url(http://3.bp.blogspot.com/-VCtcZunZJ2U/T9W7MM1uIXI/AAAAAAAAB9o/yVJ0Cad3Q0g/s1600/tab_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
margin-bottom: 1px;
}
.ddsmoothmenu-v ul li a.selected {
/*CSS class that's dynamically added to the currently active menu items' LI A element*/
color: white;
background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
}
.ddsmoothmenu-v ul li a:hover {
color: white;
background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul {
position: absolute;
width: 170px;
/*Sub Menu Items width */
height: 22px;
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
float: left;
height: 1%;
}
* html .ddsmoothmenu-v ul li a {
height: 1%;
}
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://helperblogger.ucoz.com/code/hb-smooth-menu.js"></script>
<script type="text/javascript">
})
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu2",
//Menu DIV id
orientation: 'v',
//Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v',
//class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li>
Home
</li>
<li>
Folder 0
<ul>
<li>
Sub Item 1.1
</li>
<li>
Sub Item 1.2
</li>
</ul>
</li>
<li>
Folder 1
<ul>
<li>
Sub Item 1.1
</li>
<li>
Sub Item 1.2
</li>
</ul>
</li>
<li>
Item 3
</li>
<li>
Folder 2
<ul>
<li>
Sub Item 2.1
</li>
</ul>
</li>
<li>
Create This
</li>
</ul>
<br style="clear: left" />
</div>
the black white nav menu:
HTML
<div class="sidenav">
<i class="fa fa-home"></i> About
<i class="fa fa-home"></i> Services
<i class="fa fa-home"></i> Clients
<i class="fa fa-home"></i> Contact
<div href="#" class="dropdown-btn">
<i class="fa fa-home"></i>
<i class="fa fa-caret-right"></i>Dropdown
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
</div>
<i class="fa fa-home"></i> Search
</div>
CSS
.sidenav {
height: 100%;
width: 58px;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
padding: 20px 0;
white-space: nowrap;
overflow-x:hidden;
transition: all 0.2s ease-in-out;
}
.sidenav:hover {
width: 200px;
overflow-x:visible;
}
.sidenav .fa:not(.fa-caret-right){
margin-right:20px;
}
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
position:relative;
}
.dropdown-btn:hover .dropdown-container{
display:block;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
position:absolute;
width:200px;
left:100%;
margin-top:-30px;
}
.fa-caret-right {
float: right;
padding-right: 8px;
display:none !important;
}
the sub-menu opens to the right side, if you want to open it from the left side use this code:
HTML
<div class="sidenav">
<i class="fa fa-home"></i> About
<i class="fa fa-home"></i> Services
<i class="fa fa-home"></i> Clients
<i class="fa fa-home"></i> Contact
<div href="#" class="dropdown-btn">
<i class="fa fa-home"></i>
Dropdown
<i class="fa fa-caret-left"></i>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
</div>
<i class="fa fa-home"></i> Search
</div>
CSS
.sidenav {
direction:rtl;
height: 100%;
width: 58px;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
padding: 20px 0;
white-space: nowrap;
overflow-x:hidden;
transition: all 0.2s ease-in-out;
}
.sidenav:hover {
width: 200px;
overflow-x:visible;
}
.sidenav .fa:not(.fa-caret-left){
margin-left:20px;
}
.sidenav a, .dropdown-btn {
padding: 6px 16px 6px 8px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: right;
cursor: pointer;
outline: none;
}
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
position:relative;
}
.dropdown-btn:hover .dropdown-container{
display:block;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-right: 8px;
position:absolute;
width:200px;
right:100%;
margin-top:-30px;
}
.fa-caret-right {
float: left;
display:none !important;
}
Funny, I recently made my online web-game mobile responsive too. I can help:
The problem is px. Don't use px for mobile websites. Instead, use percent (%) or viewport-width (vw) these will make it so the elements will resize to the browser size.
Absolute positioning. It will override the width of the page if the elements are not inside a div. If it's in a div, It'll not follow the width of that div. Instead, use position: relative because this is relative to the width or height of the viewport page.
Try resizing your browser on your laptop/desktop, and notice the elements match. Next:
Use the CSS3 max-width property so on laptop, it'll look fine. But on mobile devices it'll probably look like a smaller version of the desktop sized screen. For example:
will look the same on a mobile device but smaller.
Now, finally, you can use: <meta> HTML tag. It definitely works on texts, images, Etc. Here's how:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
use these tricks and your website is ready for mobile devices.
Edit: I saw your website. Everything looks fine on my laptop.
What exactly is wrong?
you just need to make some changes in your style
<style>
.ddsmoothmenu-v ul {
margin: 0;
padding: 0;
width: 130px;
/* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 0px solid #ccc;
}
.ddsmoothmenu-v ul li {
position: relative;
}
.downarrowclass {
position: absolute;
top: 12px;
left: 7px;
transform:rotateY(180deg); /* change the right arrow to left arrow */
}
.rightarrowclass {
position: absolute;
top: 10px;
left: 5px;
transform:rotateY(180deg); /* change the right arrow to left arrow */
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a {
display: block;
overflow: auto;
/*force hasLayout in IE7 */
height: 32px;
color: white;
text-decoration: none;
padding: 5px 5px 5px 25px;
border-bottom: 0px solid #778;
border-right: 0px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
color: white;
background-image: url(http://3.bp.blogspot.com/-VCtcZunZJ2U/T9W7MM1uIXI/AAAAAAAAB9o/yVJ0Cad3Q0g/s1600/tab_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
margin-bottom: 1px;
}
.ddsmoothmenu-v ul li a.selected {
/*CSS class that's dynamically added to the currently active menu items' LI A element*/
color: white;
background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
}
.ddsmoothmenu-v ul li a:hover {
color: white;
background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul {
position: absolute;
width: 170px;
/*Sub Menu Items width */
height: 22px;
top: 0;
font-weight: normal;
visibility: hidden;
left:-170px !important; /* move the sub-menu to the left */
box-shadow:none !important; /* remove the shadow */
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
float: left;
height: 1%;
}
* html .ddsmoothmenu-v ul li a {
height: 1%;
}
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
</style>
I have tried applying a Overflow: hidden/auto to varios classes of CSS.
I have tried applying a Clear: both to various CSS sections as well, so far no go.
I am just unsure on how to fix this.
https://codepen.io/Tsukiyono/pen/KXLZbP
If you change the Codepen to a mobile size, the hamburger menu pops up, when clicked there is a small grey box that should cover the whole screen, but it only goes about 50px down or so. It used to work correctly, but I made a change at some point and something broke and now I cant seem to fix it.
If one of the above options is the correct fix, could someone help me figure out the correct CSS (or combination of CSS) that I can add it to to fix my issue?
//Variables
var overlay = document.querySelector(".fa-bars");
var times = document.querySelector(".fa-times");
var menuSelect = document.querySelector("#hiddenNav")
var quoteFade = document.querySelector(".toggleOff")
var navScroll = document.querySelector("#navbar");
//Hamburger Menu Display Overlay
overlay.addEventListener("click", function(){
if (times.classList.contains("closed")){
//toggle Display property for hiddenNav
menuSelect.classList.add("toggle");
//FadeOut Hamburger
overlay.classList.add("closed");
//FadeIn X Menu
times.classList.remove("closed");
}
})
//Closes Out Overlay Display Menu
times.addEventListener("click", function(){
if (overlay.classList.contains("closed")){
//toggle Display Property for hiddenNav
menuSelect.classList.remove("toggle");
//FadeIn Hamburger
overlay.classList.remove("closed");
//FadOut X Menu
times.classList.add("closed");
}
})
//Loads text after the page loads with transition
function onStart() {
quoteFade.classList.add("toggleOn");
quoteFade.classList.remove("toggleOff");
}
window.onload = onStart;
//Change Navbar Opacity on Scroll
window.onscroll = function (){
if (document.body.scrollTop >= 100){
navScroll.classList.add("colored");
navScroll.classList.remove("transparent");
alert("working");
}
else {
navScroll.classList.add("transparent");
navScroll.classList.remove("colored");
}
};
/* Simple Resets */
html, body {
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Raleway', sans-serif;
}
/*------------------------------------------------------------------
[1. NavBar - Primary]
*/
div.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}
nav {
float: left;
width: 100%;
outline: none;
position: fixed;
}
/* used to make Navbar change color on Scroll */
nav.transparent {
background-color: transparent;
}
nav.colored {
background-color: white;
transition: 1s;
}
nav h1 {
padding-left: .5em;
color: #000;
text-transform: uppercase;
float: left;
font-size: 1.5em;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 10px;
float: right;
}
nav ul li {
display: inline-block;
}
nav ul li:hover {
font-weight: bold;
text-decoration: underline;
transition: .7s;
}
nav ul li a {
padding: 1em;
color: #000;
display: block;
text-transform: uppercase;
text-decoration: none;
}
i.fa-bars {
color: blue;
float: right;
font-size: 28px;
padding: 5px;
margin-top: 20px;
display: none;
}
/*------------------------------------------------------------------
[1.5 NavBar - Hidden Overlay]
*/
div.overlay {
background-color: rgba(0,0,0,0.7);
position: absolute;
width: 100%;
height: 100%;
display: none;
transition: .7s;
}
/* Allows Hidden Nav to be displayed */
div.overlay.toggle {
display: block;
}
i.fa-times {
color: #fff;
font-size: 2.5em;
padding: 5px;
position: absolute;
right: 30px;
top: 20px;
display: block;
}
/* Shuts down the FA Icons on click with JS */
i.fa-bars.closed,
i.fa-times.closed {
display: none;
transition: .7s;
}
div.overlay ul{
padding: 0;
margin: 100px 0 0 0;
display: block;
width: 100%;
text-align: center;
}
div.overlay ul li {
display: block;
}
div.overlay ul li a {
font-size: 1.25em;
padding: 1em;
color: #fff;
display: block;
text-transform: uppercase;
text-decoration: none;
}
/*------------------------------------------------------------------
[2 Hero Image]
*/
.hero-section {
width: 100%;
height: 50em;
margin: auto;
background: url("img/alexandru-tudorache-17852.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
/*------------------------------------------------------------------
[2.5 Quote Text]
*/
#quoteBox .container-fluid {
padding-top: 9em;
text-align: center;
}
.toggleOn {
opacity: 1;
transition: 3s;
}
.toggleOff{
opacity: 0;
}
#content {
height: 35em;
}
p#quote {
max-width: 25em;
color: white;
text-shadow: 0 0 3px #000;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing: 0.1em;
text-align: center;
margin: 40px auto;
text-transform: lowercase;
line-height: 145%;
font-size: 2.1em;
font-variant: small-caps;
}
/*------------------------------------------------------------------
[9 Footer]
*/
footer {
background-color: #000;
height: 6em;
width: 100%;
margin: 0;
padding: 0;
}
footer p {
margin-bottom: .5em;
}
.social-media-contact {
color: white;
text-align: center;
}
.social-media-contact i {
padding: 0 .5em;
margin: 0px 10px;
}
.social-media-contact .fa {
font-size: 1.5em;
}
.footerNav ul {
text-transform: uppercase;
list-style-type: none;
margin-right: 3em;
}
.footerNav ul li {
display: inline;
color: #fff;
}
.footerNav ul li a {
color: #fff;
padding: .4em;
text-decoration: none;
}
.footerNav li:not(:first-child):before {
content: "|";
padding: .3em;
}
/*------------------------------------------------------------------
[10 Media Queries]
*/
/* Navbar */
#media all and (max-width: 768px){
nav ul {
display: none;
}
i.fa-bars {
display: block;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marlee Branding Site</title>
<!-- Google Fonts - RaleWay -->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<!--Font Awesome -->
<link rel="stylesheet" href="assets/fa/css/font-awesome.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar -->
<nav class="transparent" id="navbar">
<!-- Collapsed Navbar -->
<div class="overlay" id="hiddenNav">
<div class="container">
<i class="fa fa-times closed" aria-hidden="true"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul> <!-- End Collapse Nav -->
</div>
</div>
<!-- Standard Navbar -->
<div class="container" id="navbar">
<h1>Logo</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul> <!-- End Nav -->
<i class="fa fa-bars" aria-hidden="true"></i>
</div> <!-- End Container -->
</nav><!-- End Nav -->
<!-- Hero Image and Quote -->
<section class="hero-section">
<div class="hero-image">
<div id="quoteBox">
<div class="container-fluid full toggleOff">
<div id="content">
<p id="quote">"Action is the foundational key to all success"
<br> — Pablo Picasso</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="social-media-contact container">
<p>Connect With Me</p>
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
<div class="footerNav">
<ul>
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</footer>
<!-- Custom JS -->
<script src="scripts.js"></script>
</body>
</html>
This is because of this CSS rule:
div.overlay {
height: 100%;
}
Removing this makes it work:
Note: It's not because of overflow, but just limited in height.
A better alternative would be using min-height (thanks to G-Cyr):
div.overlay {
min-height: 100%;
}
I am trying to create a dropdown for my navigation in my mobile view. I am having an issue with the anchors overlapping. I attempted to stack them on top of one another by setting the display to block and adding a margin-bottom.
This has not worked as you can see.
html
<div id="brand">
<h1>brand</h1>
<nav>
<div class="fa fa-plus"></div>
<div class="fa fa-cog">
Edit Profile
Dashboard
</div>
<div class="fa fa-sign-out"></div>
<input type="search" id="main-q" name="q" placeholder="Search" data-value="" value="">
</nav>
</div>
css
nav .fa a {
display: none;
}
nav .fa:hover a {
display: block;
position: absolute;
top: 75px;
color: black;
margin-bottom: 1em;
}
#brand {
border-bottom: 1px solid #B2B2B2;
background: white;
color: darkgrey;
padding: 1em;
}
#brand h1 {
margin-bottom: .5em;
float: left;
}
jsfiddle demonstration
What is the solution?
Everything is fine. The main problem was to setting the position: absolute fora. Simply wrap those anchors a in UL li and then set the position for UL.
CSS:
nav .fa .child { /*modified CSS*/
display: none;
border:1px solid red;
}
nav .fa:hover .child { /*modified CSS*/
display: block;
position: absolute;
top: 75px;
color: black;
margin-bottom: 1em;
}
HTML
<div class="fa fa-cog">
<ul class="child"> <!--class child for dropdown-->
<li>Edit Profile</li>
<li>Dashboard</li>
</ul>
</div>
JSFIDDLE