I added a decorative triangle using a :before on the sub-menu class. However, it covers its own main menu-item.
The website is not live yet, but I hope my screenshots will make the situation clear enough.
This is what the menu looks like. It's a WordPress installation, with a basic navigation, nothing custom except the triangle.
This is what I see when I hover on the :before inside of Chrome's inspector. It covers the bottom half of the main menu-item, making the bottom half unclickable.
This is what it looks like when I give it a fixed height of 10px. As you can see the triangle is centered, but the highlighted part begins above it.
Here's my code:
menu-item
position: relative;
float: left;
z-index: 999999;
sub-menu
text-align: center;
width: auto;
color: #78A22F;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
sub-menu:before
content: "\f0d8";
font-family: FontAwesome;
font-size: 40px;
position: absolute;
top: -36px;
left: 0;
width: 100%;
color: #78A22F;
line-height: 0px;
z-index: 2;
Does anyone have a fix or an alternative way to be able to use this triangle?
EDIT:
Here's a jsFiddle: https://jsfiddle.net/48omajxx/1/
CSS
.sub-menu:before {
/* Your other css properties */
pointer-events:none;
}
Note
If there is a click event listener on the element. It will respect the pointer-events value and does not fire.
Interesting articles about pointer events:
CSS Tricks
Developer.mozilla
Related
I've got a site which is about to hit a traffic milestone. As we countdown to our millionth visitor, I thought it would be fun to move my stats widget from the right sidebar, and nest it in the corner of my site header element.
So far, I've managed to use this CSS to move the Widget out of the side menu... but I'm really struggling to figure out how to put this element into another div.
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
This popped the widget out of the sidebar, and made it hover always in the corner. Neat...
My goal though, is to move that widget into this spot
Following this guide from the W3 Schools page, I've tried to nest the widget into the div I want it to go inside of (which is called header.site-header)
Here's the element I want it to go inside:
If I set it's position absolute and fiddle with sizing, I can shove it where I want it to go, but this doesn't look good for tablets or mobiles.
#blog-stats-2 {
position: absolute;
top: 75px;
right:5px;
width: 300px;
border: 3px solid #73AD21;
z-index:5;
}
Is there any keyword I'm missing to nest this in the corner of the site-header div?
You'll need to move your hit counter into the header HTML first before using position: absolute; otherwise it simply won't work. Try something like this.
You'll need to work this into your HTML code.
<header class="site-header">
<div id="blog-stats-2">
<!-- code here -->
</div>
</header>
Then your CSS like this.
header.site-header {
position: relative;
}
#blog-stats-2 {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 123;
}
What that does is moves your hit counter into the header section and positions it absolutely to the bottom right of the header. Using position: relative; on a parent container and position: absolute; on a child element will make sure the top, right, bottom and left attributes are relative to the parents location all the time.
For mobile you'll need to change this further using media queries to make sure it sits inside the header nicely.
#media screen and (max-width: 768px) {
#blog-stats-2 {
left: 10px;
right: auto;
bottom: 10px;
}
}
Hi im having trouble and could really use some help.
I'm using Visual Composer for Wordpress and the free Spacious theme to build my site and I have used custom css to move the navbar, fb logo and brochure/pdf icon.
The fb and brochure/pdf icon are 2 raw html elements at the bottom of the page and i gave them classes and moved all the elements, navbar,fb logo,pdf logo, product categories title manually using css
But whenever you zoom in or shrink the screen, or hover on the dropdowns on the images they jump somewhere else, can someone tell me how to make them all responsive so it looks good on all screen sizes, even mobile without the jumping?
Or does anyone know an easier way to do it? i didn't know any other way to get them at those spots.
site: http://www.corebusinesssa.co.za/Test/
Edit: dropdown solved but not the shrinking screen part
Heres my css
.main-navigation {
padding-right; 5px;
}
.main-navigation a {
color: black;
position: relative;
top: -35px;
right: 200px;
}
.fbicon {
position:relative;
top: -845px;
right: -1200px;
}
.pdficon {
position:relative;
top: -695px;
right: -1190px;
}
.pdficontext {
position:relative;
top: -650px;
right: -1070px;
color: #0e4776;
font-weight: bold;
}
.contactusheader {
position:relative;
top: -980px;
}
.productcategoriestitle {
position: relative;
top: 50px;
}
The dropdown menu's are positioned relative, so they mess up the lay-out when they appear.
If you would make them absolute, no other element will be affected.
So you could try to change the position of the dropdowns. Ad z-index to make them appear on top of the footer.
.dropdown-content
{
position: absolute;
z-index: 1;
}
This is a follow up to my last post, I found a issue after putting the images on top not sure if this is directly related. The issue is where you can't click on the nav links as they are transparent.
Only one shows the hover color when the cursor is put in a specific position. None of them can be click other that one which only works in a specific position. They do not show the hover color.
Code:
CODE HAS BEEN DELETED AS WEBSITE IS POSTED
Your problem is located here:
div.staffimg {
top: 100px;
left: 0px;
right: 205px;
bottom: 0px;
position: fixed;
}
Instead of just positioning your element, you are creating a block element that covers your navigation as it extends to bottom of screen.
Remove the left and bottom properties to solve this:
div.staffimg {
top: 100px;
/* left: 0px; */
right: 205px;
/* bottom: 0px; */
position: fixed;
}
I have a website here with a sidebar, but I want the sidebar to be hidden until the user clicks on a menu button. Anyways, my .sidebar is on z-index: 0; while my .page-content is on z-index: 1;. Why is the sidebar not hidden when I load the webpage? I have nothing in my page-content except for a <h1> for testing purposes.
Here is my HTML file:
<!DOCTYPE html>
<head>
</head>
<body>
<div class = "page-wrapper">
<div class = "page-content">
<h1>Test</h1>
</div>
<div class = "sidebar">
<ul>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS file:
h1 {
/* Just to centre my text */
position: relative;
left: 50%;
}
.page-content {
position: relative;
z-index: 1;
}
.sidebar {
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
So why isn't my sidebar being hidden when I load the webpage? When I load this, I can see the sidebar and the "Test" text both.
EDIT:
I see many of you have said that the z-index is not for hiding stuff. I am not trying to hide the sidebar. When the user clicks on the menu button, I want the page to slide over to reveal the sidebar, hence the reason I am using the z-index and not display: none;.
EDIT:
Some of you have said that this is a duplicate from another question, but when you read my comments, please realize that the question I am asking, is quite different. I am going to try to explain what I am attempting to do here as simply as I can. I have a website, where a user clicks on the menu bar, the entire website transitions 180px to the right, thus revealing the sidebar that is fixed underneath. You guys mentioned that my .page-content needs a background, but like someone else said, it only takes up my background as big as the objects inside are. How or where can I set a background that will move, yet still cover the sidebar completely?
Firstly, your z-index IS working.
z-index is not responsible for making an element visible or not. (For that, you can use the opacity,visibility, or display properties.
z-index can be used to position elements behind other elements with opaque backgrounds, which may make them appear hidden (pun intended), but rest assured, the element is still there.
Your CSS has no elements with opaque backgrounds with z-indicies higher than 0 that sit on top of .sidebar, so that's why you see it.
Your sidebar is not hidden because your .page-content doesn't have a background. Put a background and add this CSS:
.page-content{
background: #fff;
height: 100%;
width: 100%;
}
This way, you'll be able to slide it to then side afterward.
Add background to .page-content you will see the z-index's effect.
A better approach would be to hide the side bar with left property as some negative value, for example -100px as below.
.sidebar {
position: fixed;
left: -100px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
and when the user clicks the menu icon set left: 0px using javascript.
I got an issue while hovering an image. i need to overlap the image with bottom section.
heres the link
http://hg01.ispghosting.com/techashram/UIDev_Inhouse_2014/Vivekraj_KR/Html5/BibAndTucker/index.html
If you remove the "border" off your li-tag and put it on your add_product.hover_visible then add some css to it perhaps something like this? Hope this will point you the right way:
position: absolute;
left: 0;
top: 0;
display: block;
border: 1px solid red; /*This would be your shadow box effect*/
height: 350px; /* Probably set a different height here that works better */
margin-top: 0; /* This was just to remove a CSS rule you had */
It requires your li (or any close parent to this tag) to be position: relative; but when i entered these rules into your page it seemed to get an effect that was half way there to what you want I think. Good luck!