I've got a mess with two links at the top of this page ("WORK" and "ABOUT").
http://danux.me/
I'm not sure why I can't get them to style. I only seem to be able to apply a float and nothing else in the CSS does anything.
#nav_container {
float: right;
position: relative;
padding-right: 110px;
padding-top: 60px;
}
#nav_container li {
float: left;
display: inline;
color: #fff;
list-style: none;
text-decoration: none;
cursor: pointer;
}
As far as the clickable part, if I expand my browser so they are off to the right of the tiled images they are clickable.
I have the tiled images set to relative for that overlap effect, and the blue bar is set to absolute.
I have the z-index higher for the tiled images and tried applying a higher z-index to those nav links thinking I could get them to pop up on top and be clickable, but no dice.
Any guesses?
The problem is that your #home_console_wrapper element actually overlaps your #color_beam, and has a large padding-top on it to hide this behaviour. It also has a higher z-index, meaning that it will make your links unclickable.
To rectify this, you need to remove position: absolute from #color_beam, and padding-top: 190px from #home_console_wrapper.
This will cause your links to become clickable, without changing the display at all.
If you would like to still have the slight 'overlap' effect, simply set a negative margin-top on #home_console_wrapper:
#home_console_wrapper {
margin-top: -35px;
}
Hope this helps! :)
Related
On my site http://richardclifford.net/, whenever a user clicks the one-page #id elements it goes to the very first piece of content the and ignored all the container padding and h2 margin-top to look like this
I'd want it to scroll to include the padding or have an offset like this.
I've add an offset on my scrollspy but that is not fixing it and not sure how I can fix this.
add margin-top: -50px;padding-top: 50px; to target id it works
#work,#about,#contact,#copyright{
margin-top: -50px;
padding-top: 50px;
}
You can use margin-top and padding-top for this with out affecting to the front side of the website. Try to add -50px to margin top and 50px to padding top. This will fix your issue.
One common way is to add invisible pseudo elements to the original target elements of the links via CSS, like this:
#work::before {
display: block;
content: " ";
margin-top: -60px;
height: 60px;
visibility: hidden;
pointer-events: none;
}
This will "extend" the element with that ID in a way which causes the anchor to be 60px above the main element (can be any value), without causing any other visible changes.
I am working on a site here: http://americanbitcoinacademy.com/
When you scroll a bit on the site a fixed nav will appear but on this fixed navigation I want to hide the logo nav BUT I still want it to appear on the regular nav bar on the top.
Here's the CSS I am using:
.nav>li>a>img {
max-width: none;
}
.menu-item a img {
border: none;
box-shadow: none;
vertical-align: middle;
width: auto;
display: inline;
}
I want it to hide on a black fixed nav but I still want it to appear on the regular nav. ANy idea how to do so?
You can use the inspector of Chrome to check this out.
The nav menu has class .affix when it is fixed/black, so using that as the parent selector to hide the image should hide it in the fixed state without affecting the menu's default state.
.main-menu.affix .menu-image {
display: none;
}
Can't use chrome as I am on iPad, as the navy bar looks different at the top and when it's further down the page, I'm guessing that at some point you apply a different class to the nav div?
You can target the img within that class with the style display: none;
Hope this helps, if not I'm sure some one on a computer can give more of an example
I created a website for a friend: http://personaltrainerffm.de/
and the logos underneath (see pictures) won't be shown centered. Also when browsing with a mobile device, it will get screwed. Can you please help?
THANK YOU VERY MUCH in advance
Screenshot on smartphone
Those logo containers (.container-erfahr ul li) all have a float: left setting in their CSS. Since the second one is higher than the third one, the fourth one is positioned below the third one (i.e. right of the second one) in the mobile view - that's the way floats work.
To fix this and center them, erase the float:left and define them all as display: inline-block. To center the elements, add text-align: center to their container element .container-erfahr.
These are the changed rules:
.container-erfahr ul li {
display: inline-block;
margin: 30px;
padding: 0px;
border: 0px solid lightgray;
list-style: none;
}
.container-erfahr {
margin-top: 100px;
margin-left: 0px;
text-align: center;
}
I know this is probably a stupid question. But say I have a navigation menu, would it be more practical to set a fixed height..
nav {
background: red;
Width: 80%;
height: 60px;
}
nav ul li {
Line-height: 60px;
}
Or to use padding to define the height?
nav {
background: red;
Width: 80%;
Padding: 30px 0;
}
I usually go with the first choice. But I'm worried that the font size might change in different computers/browsers and therefore becomes unproportional with the container. Could this actually happen?
Your vertical padding should probably go on the
nav ul li a
That way, if the anchor text scales up, so does your header and everything doesn't break out, and you have a larger clickable area. Also, don't leave the anchor display inline.
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;
}