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;
}
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;
}
}
I am quite new at coding, and I would love spend a lot of time with it, but now I really do not have time for that. I spent two weeks to trying to find out this thing.
I made my portoflio on tumblr. And I used a theme, where the pictures are filling the whole screen, so you can not basically anything, but pictures. Which is good, I wanted it like this. BUT. I would like to leave a little note, actually a pointing arrow picture which says: "keep scrolling for more". So this note is always hidden by the full-sized images.
How can I move the note-image on the very top? Above the image posts?
Which is the easiest way?
I tried some resolution, i have found here, but none of them worked...
I thought would not be a problem, but this is my portfolio, and I still could not send it, because of this issue.
Thank you so much for any help. Sorry for being so dumb.
This is my portfolio.
I don't have experience with tumblr, but based on your tags it looks like it uses HTML and CSS. When you have an image that fills the entire screen and want to add an image on top of that image, you need to have both images within a div container to give them something to reference. This container needs to have position: relative and the style of the images will be relative to it. So, your HTML and CSS should look something like this:
HTML
<div class="container">
<img class="imageOne" src="path/url goes here" alt="" />
<img class="imageTwo" src="path/url goes here" alt="" />
</div>
CSS
.container {
position: relative;
top: 0px;
left: 0px;
}
.imageOne {
position: relative;
top: 0px;
left: 0px;
}
.imageTwo {
position: absolute;
top: 30px;
left: 30px;
}
So your first image is set to 0 pixels from the top and 0 pixels from the left. This mates it to the container div you created to hold the images and set it to the same positioning. Your second image is position: absolute to the container div so it is 30 pixels from the top and 30 pixels from the left and was loaded after your first image and thus placed on top!
Cheers!
You can do it just adding the property z-index: xx to the image (or actually whatever) you want to be above anything else. Also, you can combine it with position absolute or fixed.
div { width: 100px; height: 100px; }
.container {
position: absolute;
top: 0px;
left: 0px;
}
.green {
position: relative;
left: 20px;
top: 20px;
background-color: green;
z-index: 1;
}
.pink {
position: relative;
left: 80px;
top: 0px;
background-color: pink;
z-index: 3;
}
http://codepen.io/paulirish/pen/CgAo
here you can see various examples, credit for Tom Wiltzius
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
I'm currently modifying a Xenforo theme for my website and I'm having trouble with my header bar after I downloaded a new theme.
http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/
If you scroll down the page, you'll notice that certain elements such as the search bar, breadcrumb arrows and mini avatars are appearing above my header bar.
I'm not sure why this is happening as I've set the header bar's z-index to 9999 and its position is fixed (when you scroll down after a certain point, javascript sets position = fixed). All the elements that are overlapping it have z-indices that are lower than 9999. The odd thing is, this wasn't an issue on my older theme and I never modified any CSS for it to start doing this.
This is the div which contains my header:
#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}
This is the mini avatar that overlaps my header:
.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}
The search bar that overlaps my header:
#searchBar {
position: relative;
z-index: 52;
}
I've also tried setting a high z-index to all of the elements inside my header bar but it makes no difference.
Feel free to inspect any of the HTML in my website if you'd like to get more information.
Any help would be greatly appreciated. Thanks.
When setting Z-index you need to do this on the containing element not the ones inside it.
In your case the #headerMover div has z-index:1; applied to it.
If you take this out of your CSS or add a higher z-index on #headerMover it solves your problem.
#headerMover, .footer, .footerLegal {
z-index: 1000;
}
You need to give the parent/container the z-index, not the elements inside it.
I am trying to make a website responsive; I am almost done with it, except that when I make the window smaller, the nav links overlap the logo on the left. Look at it here
How do i make the nav bar move to under the logo when i re-size the window?
Thanks for any help
I had a play with your code and the first thing I spotted was the two #nav id's.
You should only have one unique id per page.
However, your main issue is the position fixed of the navigation items.
This is causing the nav to always just march on over the logo.
Position fixed ignores the document flow and places it wherever you put it.
You need to get the navigation back into the document flow
Change your nav items to relative and meddle with the top positioning.
You should place these in a new media query relating to your break points
You will also need to remove all those positioning styles.
That should get you half way there.
I would help more but I've just been given a rum and coke so best to stop now.
Steve
Either move the logo down, or create some space above it and put the links in said space.
You have to change many of the position attributes along with the float properties - I played around with the CSS on the site, and this is what I changed:
#topBar {
height: 300px;
}
.BODYcontainer {
margin-top: 300px;
}
.container .columns {
float: none;
}
.container .columns.logoBox {
left: 0;
position: relative;
display: block;
float: none;
margin-bottom: 50px;
}
#nav {
position: relative;
float: none;
top: 0;
left: 0;
right: 0;
text-align: center;
display: block;
}
#companyNav {
float: none;
position: relative;
top: 0;
}