Can you link to a live page so that we can see exactly what is happening?
Unfortunately no, I donāt have a live page of this right now. I actually just semi-fixed it I guess? I found that the logo was causing the problem. So I added a 20% margin to the navbar dropdowns to move them back into place when the logo was out. Then when I put the logo back in, they stayed right where they were. I expected them to be pushed down by the logo? But they werenāt. So it looks fine on my normal monitor now. However, Iām getting a similar issue on my laptop monitor now. I donāt understand how to make this responsive so that it can just change with the monitor size.
Well, itās hard to offer assistance without access to the full code (and images) so that we can reproduce the issue and see exactly what youāre seeing. Can you upload the relevant files here in a zip file?
2 Likes
I completely understand, but to be honest Iām not sure itās that easy. This is an asp.net MVC project so there is C# code, and we also have it hooked up to a content management system. Iām trying to make a solid codepen based on the source code when the site is running, but I canāt seem to get it anywhere close.
That tells me your header was overflowing and you added a band-aid fix.
Your codepen only needs to show what is going on from the header to banner div. You donāt need to include <div id="myCarousel">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.wrap {
width: 90%;
margin: auto;
border: 1px solid;
}
.header {
min-height:160px;
background:#a3a3a3;
}
#banner {
text-align: center;
background-image: url("/Images/Banner.png");
}
.button {
display: inline-block;
height: 70px;
width: 165px;
margin: 1em;
padding: 5px 10px;
background: linear-gradient(to bottom, #95bfe6, aliceblue);
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
border-radius: 50%;
border: 1px solid #002d62;
color: #002d62;
font-size: larger;
line-height: 55px;
}
.button:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<!-- missing pieces of the puzzle -->
</div>
<div id="homepagemain">
<div id="banner">
<a class="button">My Paystub</a>
<a class="button" type="button" href="https://portal.paychekplus.com/" target="_blank">Pay Card</a>
<a class="button" asp-controller="Home" asp-action="NewsLetter">Monthly Newsletter</a>
</div>
<!-- myCarousel not needed -->
</div>
</div>
</body>
</html>
Yea but thatās the problem. I canāt get it to display properly. This is the best I can seem to get.
See the Pen vjJVaW by Ethan Forbes (@ethancodes) on CodePen.
From looking at your menu styles it looks like the relative positioning is going to be the cause of the problem.
Relative positioning preserves itās original space in the page, when offset values are added it only moves the box visually and leaves behind a black hole where it was originally in the page flow.
Thatās why dropdown menus use absolute positioning, so they are removed from the page flow and donāt push on other elements in the page.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
*
*
*
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
Ah I see. I will try to fix it by using absolute then. I am (obviously) fairly new to web development, and when I started this project I was getting told not to use certain things, one of which was absolute positioning. However, Iāve seen it used several times with good outcomes.
This is by no means a modern method, in fact it is an old dropdown example. It will show you how the basic structure your after should work. Of course your menu would change for mobiles.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.wrap {
width: 90%;
min-width:400px;
margin: auto;
border: 1px solid;
}
.header {
padding-top:160px;
background:#a3a3a3;
}
/* ========= Dropdown Menu Styles =========== */
#nav, #nav ul {
text-align:center;/*center the list items*/
margin:0;
padding:0;
list-style:none;
background:#fff;
}
#nav li {
display:inline-block;
position:relative;
color:#FFF;
}
#nav li a {
display:block;
padding:12px;
text-decoration:none;
}
#nav li:hover a {color:#7FFF00; background:#000;}
/*=== Hide and Reveal All Sublists ===*/
#nav li:hover ul ul,
#nav li:hover ul ul ul {
margin-left:-999em;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul {
margin-left:0;
}
/*=== All Sublist Styles ===*/
#nav li ul {
width:150px;
position: absolute;
margin-left:-999em;
left:0;
top:auto;
border:1px solid #000;
border-bottom:0;
z-index:1;
}
#nav li li {
display: block;
height:auto;
margin:0;/*reset from #nav li (reclaim the -2px whitespace kill)*/
text-align: left;
}
#nav li li a {
display:block;
width:130px;
padding:5px 10px;/*give top and bottom padding with line-height reset below*/
background:#3333FF;
color:#FFF;
border-bottom:1px solid #000;
}
/*=== Second Level Styles ===*/
#nav li:hover li a {color:#FFF; background:#3333FF;}
#nav li li:hover a {color:#7FFF00; background:#000;}
/*=== Third Level Styles ===*/
#nav li li:hover ul {
margin-left:50%;
}
#nav li:hover li li a {color:#FFF; background:#333;}
#nav li li li:hover a {color:#7FFF00; background:#000;}
#banner {
text-align: center;
background: #404f6e url("/Images/Banner.png");
}
.button {
display: inline-block;
height: 70px;
width: 165px;
margin: 1em;
padding: 5px 10px;
background: linear-gradient(to bottom, #95bfe6, aliceblue);
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
border-radius: 50%;
border: 1px solid #002d62;
color: #002d62;
font-size: larger;
line-height: 55px;
}
.button:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Current Events ›</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four ›</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li><a href="#">Reference ›</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five ›</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li><a href="#">Link Six</a></li>
</ul>
</li>
<li><a href="#">News & Updates</a></li>
<li><a href="#">Bookmarks</a></li>
</ul><!-- end nav -->
</div><!-- end header -->
<div id="homepagemain">
<div id="banner">
<a class="button">My Paystub</a>
<a class="button" type="button" href="https://portal.paychekplus.com/" target="_blank">Pay Card</a>
<a class="button" asp-controller="Home" asp-action="NewsLetter">Monthly Newsletter</a>
</div>
</div>
</div>
</body>
</html>
There are more times than not in any project where you shouldnāt use absolute positioning, itās something usually best avoided.
But thatās not to say never use absolute positioning. Like most css, it has its uses, itās just a case of knowing where it is appropriate and where it is not.
That it is not showing the default value suggests that there is more styling being applied from somewhere. For example some frameworks have their boilerplate css files.
Inspect should tell you where the styling is coming from, which file, which line.
3 Likes