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;
}
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;
}
On my homepage, I'm trying to make three images span the entire width of the browser window. See my site here: http://accelfoods.com. I want the last 3 images on the page (About AccelFoods, Industry Engagement, Portfolio Companies) to be the same width as the image directly under the navigation.
I've figured out how to control #page-body and can make the image go to the edge of the left side (like this: http://imgur.com/gfXPyPK). But I don't know how to make the white space on the right disappear.
I've commented this CSS out for now until I figure it out, but here's what I'm using to manipulate the images:
#page-body {
margin-left: 0px;
padding-right: 0px;
border-right: 0px;
margin-right: 0px;
overflow-x:hidden;
width: 100%;
}
Any help would be greatly appreciated, thanks!
first of all, remove "max-size" parameter from:
#banner-area, #page-body, #page-footer{
width: auto;
}
then add this:
.sqs-block-content {
width: 100%;
}
.image-block-outer-wrapper.layout-caption-hidden {
display: block;
float: left;
position: relative;
width: 100%;
}
.sqs-block-image .intrinsic {
display: block;
float: left;
margin: auto;
max-width: none !important;
position: relative;
width: 100% !important;
}
but there's also script adding a strict width for this intrinsic class, I cannot see that from the first glance, it's kind of encription there and it will take time to understand it... though, the suggestion I'm giving you here definitely overrides the script.
P.S.
I would reccomend you not to use this kind of sitebuilder(s) (you definitely use some kind of) - because there's pretty tough class generator and if you need further updates there -you'll get pretty much more troubles.
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.
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.