My webpage's top looks like this, there is a homepage and a menu toggle that opens up a navigation bar.
Here's the code
<div class="logo">
<img style="margin-left:5%;height:100px;width:130px;vertical-align:middle" src="/download.png" alt="" />
METRO RAIL SYSTEM</div>
.logo {
position: fixed;
top: 1rem;
left: 0%;
z-index: 100;
color: white;
font-size: 2rem;
text-transform: uppercase;
pointer-events: none;
transition: 1s;
width: 100%;
background-color: #333;
}
.menu-toggle {
position: fixed;
z-index: 9999;
right: 5%;
top: 4rem;
width: 5rem;
height: 2rem;
/* background: red; */
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-around;
transition: 0.5s;
}
Now, the fixed in .logo enables me to have title bar(image+text+backcolour) be fixed while I scroll down.
But, when I open the navigation bar, I only want to have my (image+text) there, but as you can see the background colour is also there.
Is there a workaround to do this? I assume I will have to get a background strip rather than colour.
When the menu is toggled, add a CSS class (for eg menu-open) to the logo element and remove the background color using transparent keyword:
.logo.menu-open {
background-color: transparent;
}
Related
I am making a personal site about Boy Scout merit badges. I have a page with a background image where I put up a CSS grid containing cards, each of which is about a different badge. The card shows the badge emblem and has the title of the badge. When you hover over the card there is a sliding up of white text with a blue background that explains the badge. When you stop hovering, it slides back down.
The effect works for the most part, but there's one small problem. The cards have rounded borders, and when the blue slides down, at the very end of the slide down, the blue extends beyond the edges of the card. It is very distracting. It starts the slide up the same way, but for some reason it's more distracting on the way down than on the way up. Here's what it looks like at that end.
Here is my HTML:
<main class="main--grid-container">
<div class="mb-blocks center rounded-border wrapper">
<img class="mb-emblem" src="https://retailobjects.scoutshop.org/media/catalog/product/cache/15846fcd7c7438adaa15ad763c45b358/1/0/10504.jpg" alt="american heritage badge emblem">
<h4>American Heritage</h4>
<div class="overlay">
<div class="content">
<p>
Scouts learn about American history while working on the American Heritage
merit badge. Topics covered range from the Declaration of Interdependence,
to the history of the US flag, to historic places, to their own family
history. They also learn about careers related to the study of American
heritage.
</p>
</div>
</div>
</div>
</main>
Here is the CSS:
body {
background-color: lightgreen;
}
.mb-emblem {
height: 150px;
}
.main--grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 25px;
padding-left: 25px;
padding-right: 25px;
}
.center {
text-align: center;
}
.rounded-border {
border-radius: 25px;
}
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
}
h4 {
font-size: 24px;
margin: 0;
}
.wrapper {
position: relative;
}
.content {
color: #fff;
font-size: 1em;
padding: 1em;
}
.content span {
font-size: .75em;
display: block;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #003366;
border-radius: 25px;
width: 100%;
height: 0;
transition: .5s ease;
overflow: hidden;
margin: 0;
}
.wrapper:hover .overlay {
height: 100%;
}
I changed the background-image to a background-color and put it in a CodePen to make it easier to see. Here is the CodePen.
Thanks for the help!
All you need to do is add overflow: hidden to the mb-blocks class.
Like this:
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
overflow: hidden;
}
replace this style code to fix the problem.
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
overflow: hidden; /* This is the important part */
}
My problem is when I scroll up, the text on the page goes through my navbar and it looks really unprofessional and I need to fix it. I want to make it so that my navigation bar is layered on top of my body / section text (body text includes navigation bar but section only includes text not on my nav bar),
I tried adding a background-color and that worked except when I used my dark / light mode switcher, I have css properties for dark mode and light mode but I can't use a background color otherwise when you switch, it will still show the background color for light mode (or whatever mode you were deigning for).
I also tried Z-Indexes since that is supposed to work but no, literally did nothing. Which was really weird. I wish I could elaborate more but that's all I can say, it just didn't work. Here is an example of what I did but I can't actually show you the exact code since I already deleted those Z-Indexes since they didn't work.
EXAMPLE NAV BAR CSS {
z-index: 100;
}
EXAMPLE SECTION / TEXT CSS {
z-index: -100;
}
Here's my navigation bar code:
<ul>
<div class="without-dark-ul">
<img class="logo" width="100px" src="\imgs\logo.png">
<h1 class="logo-side">[PRIVATE] Accounting</h1>
<h2 class="logo-side-slogan">The best, afforadable accounting.</h2>
<br>
<hr>
<h3 class="navbar-text">Navigation</h3>
<div class="navbar">
<li><a class="main-nav" href="#">Home</a></li>
<li>Pricing</li>
<li>Contact</li>
</div>
<div class="vl"></div>
<h3 class="dark-mode-text">Dark / Light Mode</h3>
</div>
<div class="ul-dark">
<li class="li-dark">
<span>Dark</span>
<span>Light</span>
</li>
</div>
</ul>
And here's my CSS for my navbar (and I've got some in navbar CSS and some in dark mode CSS, I honestly don't know why I did it like that though.)
/* START NAVBAR */
.logo-side {
margin-left: 140px;
margin-top: -95px;
font-size: 40px
font-
}
.logo-side-slogan {
margin-left: 140px;
margin-top: -30px;
}
.logo {
margin-top: 20px;
margin-left: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
/* position: -webkit-sticky; Safari */
/* position: sticky; */
top: 0;
width: 100%;
z-index: 100;
}
ul > hr {
margin-left: 10px;
margin-right: 10px;
margin-top: -10px;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: inherit;
}
li a:hover {
background-color: rgb(105, 103, 103);
}
.main-nav {
background-color: #383838;
color: white;
}
.navbar {
margin-left: 20px;
margin-top: 30px;
padding-bottom: 70px;
}
.navbar-text {
margin-left: 20px;
margin-bottom: -20px;
}
.navigation-bar {
background-color: #262626;
position: absolute;
}
/* END NAVBAR */
/* START DARK MODE */ (This includes some nav bar CSS properties.)
.li-dark {
list-style: none;
width: 100%;
height: 60px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
}
.ul-dark.active li {
transform: translateY(-30px);
}
ul li span {
display: block;
height: 30px;
line-height: 30px;
width: 100%;
}
ul li span:nth-child(1) {
background: #262626;
color: #fff;
}
.ul-dark {
position: static;
top: 20px;
right: 20px;
margin-top: 25px;
margin-left: 320px;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
cursor: pointer;
overflow: hidden;
}
.dark-mode-text {
margin-left: 320px;
margin-top: -113px;
}
/* END DARK MODE */
I don't know if that is all you need but please ask me to send more code if you need more!
Thanks for your help.
Solninja A
give a position relative to body and your text parent
and z-index:10000;
just starting out on my code journey and am hoping you can shed some light here. I just can't quite figure out how to adjust my code to reflect what I'm trying to do. I've tried to use float:right but then it seems to tamper with my ability to modify margins afterwards.
I've tried to adjust padding/margin/ text-align and can't seem to get my navbar text to the position that I want. What I want is to align it right,
and then offset it from the top where it is, and then to create space between the words for presentation. I'd like to keep it as a fixed navbar with the logo and text present during scrolling, at all times.
Here's a link to jsfiddle for an example, see below for my topnav CSS code.
https://jsfiddle.net/gbr403/t1u7q3wL/
.topnav {
background-color: black;
overflow: hidden;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
height: 63px;
border-bottom: 1px solid seashell;
}
You can use flexbox to align items in navbar. See example below
body {
margin: 0;
}
.navbar,
.navbar--links {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar {
background-color: #222;
padding: 13px 15px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.navbar--logo {
width: 50px;
height: 50px;
}
.navbar--links a {
text-decoration: none;
color: #fff;
margin-left: 18px;
}
<nav class="navbar">
<img src="https://images.pexels.com/photos/258174/pexels-photo-258174.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="navbar--logo"/>
<div class="navbar--links">
Mission
Featured Tea
Locations
</div>
</nav>
Use css flex. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
body {
background-color: black;
}
.topnav {
background-color: black;
overflow: hidden;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
height: 63px;
border-bottom: 1px solid seashell;
display: flex;
justify-content: space-between;
align-items:center;
}
.topnav a {
font-size: large;
font-family: sans-serif;
}
#img1 {
}
#logoid{
height: 50px;
width: 150px;
padding: 10px;
}
<body>
<header>
<div class="image1">
<img id="img1" src="">
</div>
<div class="topnav">
<div class="navlogo">
<img id="logoid" src="https://via.placeholder.com/150">
</div>
<div>
Mission
Featured Tea
Locations
</div>
</div>
</header>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>1111<br/><br/><br/><br/><br/><br/>2222
</body>
I'm writing an app that replicates the look/feel of a desktop OS, and my navbar in the bottom of the page shrinks in height when the page is resized in height. It shrinks in such a way that it becomes unusable at a point.
I've already tried some CSS properties such as using: position: fixed, position: relative, and position: absolute. position: absolute is the one that has been the best try out of all of them. If I use any others, the navbar would stick at the top no matter what you change in the style.
body {
/* these are for the navbar */
top: 100%;
margin: 0px;
padding: 0px;
/* normal styles */
font-family: "MS Sans Serif";
color: white;
background-color: #008080;
font-size: 12px;
/* without this, the page would go blank
overflow: hidden;
}
ul {
/* this is what works best */
position: absolute;
width: 100%;
top: 96.17%;
/* normal navbar styling.. */
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #ffffff;
}
I expected the navbar to move up normally as needed, keeping its properties. Instead, the navbar moves up while the page is resized, but it becomes thinner and thinner until it is unusable.
Here is a sample gif: enter image description here
ul {
display: flex;
list-style: none;
align-items: center;
flex-flow: row;
background: red;
position: sticky;
max-width: 100vw;
width: 100%;
color: wheat;
height: 50px;
justify-content: space-around;
}
#media screen and (max-width: 768px) {
ul {
transition: .2s all linear;
height: 45px;
max-width: -webkit-fill-available;
width: 100%;
}
}
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
I have created a horizontal menu that when you hover an item, a drop down menu appears. This is all fine. However, when you leave the menu item (to use the drop down) the drop down disappears. I understand that this is because you are no longer hovering it, but how do I solve this? Note: I don't want the drop down menu directly below it, I want a reasonable gap between the menu item and drop down (as I have it at the moment). Thanks.
HTML
<header id="header">
<div class="container">
<div id="logo"></div>
<nav class="header-menu">
ABOUT
<div class="about-dropdown">
CORE SERVICES
AT&L
HSEQ
CLIENTS
CONTACT
</div>
SERVICES
FACILITIES
CONTACT
</nav>
<div id="hamburger"></div>
<!--<div id="box-shadow-menu"></div>-->
</div>
</header>
CSS
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
user-select: none;
display: block;
transition: all 0.8s;
line-height: 100px;
z-index: 1000;
transform: translateX(0);
backface-visibility: hidden;
margin: 0;
}
header .container {
width: 1440px;
height: 100px;
border-bottom: 0.75px solid rgba(255,255,255,0.1);
}
#logo {
width: 55px;
height: 55px;
float: left;
margin-top: 27px;
background-image: url(../images/logo_white.png);
background-size: cover;
}
nav.header-menu {
float: right;
height: 96px;
vertical-align: middle;
padding-top: 1px;
}
.header-menu-item {
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 800;
margin-left: 20px;
text-decoration: none;
color: #ffffff;
line-height: 96px;
letter-spacing: 0.5px;
transition: 0.55s;
}
.toggle {
opacity: 0.3;
}
.current {
border-bottom: 2px solid #fff;
padding-bottom: 40px;
}
.about-dropdown {
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0 0 4px 3px rgba(0,0,0,0.1);
z-index: 3000;
margin-top: 35px;
margin-left: -35px;
border-radius: 3px;
display: none;
transition: 0.8s;
}
.about-dropdown a {
display: block;
text-decoration: none;
padding: 0px 28px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 800;
margin: 0;
line-height: 50px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.header-menu-item:hover + .about-dropdown {
display: block;
}
On the 'a' tag, add a height or padding-bottom to it on hover. Your 'a' tag might need to be positioned absolute so that its height won't affect the height of your header.
Something like the below
.about-dropdown a:hover {
padding-bottom: 30px; /*height dependent on the gap you want to fill*/
position: absolute;
}
Unfortunately, I could not get your example to work. I did create a little demo of a CSS only solution to your problem.
It allows users to trigger the submenu by hovering the menu item. They can then keep the submenu visible by hovering it. When their cursor leaves the submenu, the submenu will be hidden after some specified delay, I chose 1 second in my demo. If users hover the submenu again within this delay, the submenu is not hidden. This allows users not only to move their cursor from the menu item to the submenu, but also makes it so that the submenu is not hidden immediately when users accidentally move their cursor to the left or right of the submenu.
.trigger {
box-sizing: border-box;
position: relative;
width: 120px;
margin: 0 0 50px;
padding: 10px;
background: #bada55;
text-align: center;
}
.sub {
box-sizing: border-box;
position: absolute;
top: 100px;
left: 0;
width: 120px;
background: #4863a0;
color: #fff;
text-align: left;
/* hide element for now */
max-height: 0; overflow: hidden;
opacity: 0;
/* make submenu not hoverable when opacity transition finished,
* do this instantaneously */
transition: max-height 0s 1.5s,
/* hide the submenu after 1 second, in 400ms */
opacity .4s 1s;
/* prevent users from showing submenu when hovering hidden element */
pointer-events: none;
}
/* sub elements can be hovered */
.sub > * {
pointer-events: auto;
}
/* show submenu when trigger or menu itself is hovered */
.sub:hover,
.trigger:hover .sub {
max-height: 500px;
opacity: 1;
transition-delay: 0s;
}
/* give items some spacing */
.item:not(:last-child) {
padding: 10px 10px 5px;
}
.item:last-child {
padding: 10px;
}
<div class="trigger">HOVER ME
<div class="sub">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</div>
The idea is to (ab)use CSS transitions. We hide the submenu completely and set a transition that is delayed. Then, when hovered, we set the delay to zero. What this will do is show the submenu immediately, but hide it only after some delay. This sort of works, but now the submenu can be shown when users hover the hidden element. To prevent this, we make the submenu have no height (max-height: 0) and hide its sub elements (overflow: hidden). Browsers may now still decide to trigger the hover element, so we make sure they do not by also setting pointer-events: none. All of this should also be delayed, hence the transition on max-height. Finally, we make it so that the submenu can actually be hovered when it is shown by setting pointer-events: auto for the elements in it. Unfortunately, it is not possible to transition to max-height: none, so we specify some very large value, I used 500px in the demo.