Hi I recently made my site navigation "sticky" for : https://shiftins.com. The only problem is the height of the navigation has been removed from the page and looks like it became a separate layer that "floats" over the page. It ends up hiding some of the top parts of my page content. I tried adding margins and padding to various containers but there are too many different ones sitewide. Is there a solution that will make my site honor the height of the sticky navigation site wide?
Here is the code I used:
.site-header {
position: relative;
z-index: 999;
background: #0074E5;
background: #0c5798;
height: 60px;
box-shadow:inset 0 1px 7px rgba(0, 0, 0, 0.2);
}
.site-header .wrap {
padding: 0;
}
.site-header {
position: fixed;
width:100%;
height: 60px;
}
You need top:0; on your fixed header. Then add the margin to a global div like site-container like this this:
.site-container{
margin-top: 60px;
}
.site-header {
position: fixed;
width:100%;
height: 60px;
top:0;
}
float element always remove the parent height so you have to use overflow:hidden: on parent element or apply clearfix hack/class
see this Css trick
Related
I have been trying to edit my header in Joomla. I have added following class to my template to round the corners and add the background:
.holola {
background: #FFF!important;
border-top-left-radius: 15px;
border-top-right-radius: 15px; }
How I can bring the logo up and make it look offside the header, like in attached image. I know how to make this happen using image in header, but I want to make it pure CSS to make the page look better in mobile version.
I have tried to add padding but I think it should be more complicated code to use?
Remove the padding you've added.
Then add some top margin to the .wrapper to push the main content down a bit.
body.boxed .wrapper {
margin: 60px auto 0 auto
}
And now add margin-top to the logo to move it up.
#header_logo {
margin-top: -60px
}
Try adding these also
#zo2-header{
margin-top: 50px;
}
#header_logo .logo_normal{
position: absolute;
top: -103px;
}
Remove your padding: 60px 0; from #zo2-header and replace with margin-top: 60px;.
Add
#header_logo {
position: relative;
top: -60px;
}
You would want to use position relative. See this jsfiddle for a simple example that should work for you situation.
#img {
background-color:red;
height: 80px;
width: 80px;
position:relative;
top: -40px;
}
Basically the important parts here is the combination of position: relative and top: -40px. This says position the element relative to the parent element and "anchor" its top -40 pixels from where it would normally be (top aligned with the header's top)
Jsfiddle to demonstrate my issue.
I have a SPA (Single Page Application).
In the appliation several dialogs can popup on the screen.
Every popup has it own width and height.
The title and content of the dialogs are added by angularJs
The problem i have here is the size of the dialog.
Currently all popups are made and added seperatly. I want to change this into one popup with variable content. The problem that comes with this is that the popup must wrap the contents width.
Example (as shown in the Jsfiddle)
<div class="dialog">
<div class="titlebar"></div>
<div class="content">
The content that is added has css that tells it has a width of 400px
This means the dialog needs to wrap to this 400px
</div>
</div>
How do i solve this by only using CSS?
Some examples of the variation of popups (although the width of both look the same, this is not the case)
Use display:table for the dialog.
Here is your Updated Fiddle.
For young browser you may use :
1) display:flex; property (includes centering) DEMO
.backdrop {
position: fixed;
top:0;
}
.backdrop {
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
margin:auto;
position:relative;
}
2) max-content as value for width and not set any width to inner
content . (exept some padding to keep room for the close button) :
DEMO
Info on W3C about those new keywords value, soon avalaible i hope.
CSS updated
.dialog {
width: max-content;
z-index: 101;
margin: auto;
/* basic way t o center */
top:50%;
left:50%;
margin:-80px -150px;
}
.titlebar {
height: 50px;
line-height: 50px;
background-color: #000000;
border-radius: 10px 10px 0px 0px;
}
.title{
color:#FFFFFF;
font-size: x-large;
padding:0 50px 0 10px;
}
.close_button {
position: absolute;
right: 0px;
top: 0px;
line-height:30px;
padding: 5px;
margin: 5px;
border-radius: 10px;
background-color: #ffd549;
color: #000000;
}
.content {
background-color: #FFFFFF;
}
.content-width {
background-color:#FFF000;
}
or as already said , use the display: table, inline-table
Using display: inline-block; text-align: center;
Works in ie >= 8.
Fiddle.
I don't understand the problem.
If you want to center the content-width div element, simply add margin: auto;.
If you want the container to fit the WIDTH of its content, you must change the display property from block to something else, like inline-block or table (as suggested by #jacelysh).
What is it exactly that you are trying to do?
A div without a set width will take up the width of the parent.
try this.
.content {
background-color: #FFFFFF;
min-width: 100%;
}
.content-width {
width: 100%;
background-color:#FFF000;
}
http://jsfiddle.net/VQA4k/6/
Checking again now. You can just remove the width from those two classes and it will work.
This is what you want I think.
http://jsfiddle.net/VQA4k/16/
My sticky header covers the vertical scrollbar, is there a way to fix this?
URL: http://jlwebdesigns.co.uk/
Header code (using a HTML5 tag)
header {
background: none repeat scroll 0 0 #283744;
border-bottom: 4px solid #4F5B66;
height: 97px;
margin-top: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Yeah make that element have a higher z-index and make sure you set a positioning such as relative or what not to that element.
header {
background: none repeat scroll 0 0 #283744;
border-bottom: 4px solid #4F5B66;
height: 97px;
margin-top: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Underlying element
#underlyingelementwithscrolls{
position:relative;
z-index:1000;/*higher than 999 since header has it*/
}
in your case you have overlayed the bodies scroller
do this and it should get fixed
body{
overflow:hidden;}
html{
overflow-y:scroll;}
solution is not very neat but give margin-top: 97px; to the below div....based on ruddy's fiddle :
here is a demo
After reviewing your page you can change a couple of things...
Your banner is at 100% but it also has a padding which makes your banner to exeed the 100%. You try to avoid this by putting the overflow hidden in the html, body but that makes your header to overlap the scroll bar.
Solution:
html, body {
width:100%;
overflow:hidden; //remove this
}
#homeBanner {
width: 100%;
background: url(../img/bannerHolder.jpg) center no-repeat #558582;
text-align: center;
margin-top: 100px;
padding: 13% 2%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
I looked at the site and a simple fix is to put:
margin-top: 97px; // if header has some padding so count that too.
Put that margin on the section in the CSS. This will fix the scrollbar but will break the logo. You will have to replace some stuff because of the new margin.
Here is a demo using the margin-top. You can see the text under the header. Take the margin away and it will hide behind the header.
DEMO
Note: Just seen there's more then 1 section. You could just wrap them all in a div and give that the margin. Or use :first-of-type.
summer-band.com
I know this can be removed using line-height:0; on my #navigation , but that throws the entire nav out of whack. Trying to find other solutions to remove hits 5px margin (only on Firefox/ mobile... doesn't show up in Chrome/ Safari.)
It's actually the navigation/sidebar that is causing this. I suggest you set the navigation to position: absolute. Then you'll just need to move the header image to the left. Preferably, include the header and navigation inside the container.
EDIT: Next thing to do is this:
#container {
width: 560px;
padding: 0 130px;
margin: 0 auto;
float: none;
z-index: 5;
height: auto;
min-height: 600px;
background-color: rgba(0, 0, 0, 0);
filter: alpha(opacity=100);
opacity: 1.0;
position: relative;
}
I've added margin: 0 auto, float: none (but instead of that, just remove the float), padding and position: relative. The last step is to move the navigation and header inside the container, so that the navigation is positioned relative to the container.
Finally, add this to the navigation styles:
left: 0;
I've been trying to figure out how to get my links working in layered divs
I have a big div containing two other divs:
main div with content and
a navigation div for my menu
The problem is that the main div is overlapping the navigation div wherein i want my links to be (ribbons) so that it looks like they are being pulled out when hovered. But they arent active links at all? my css is as follow:
.navigate {
width: 1020px;
height: 300px;
position: absolute;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
top: 190px;
z-index: -1;
border: 1px solid red;}
and
.main {
background: url("../images/papir.png") no-repeat center; /* papir.png bredde=1020px */
margin-left: auto;
margin-right: auto;
margin-top: 150px;
margin-bottom: 7em;
width: 1020px; /* 1020px */
height: 752px; /* 752px */
z-index: 0;
border: 1px solid green; }
it's like the navigation div is behind something :$
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
I've tried to fix it with
body {
position: relative;
z-index: 0; }
read somewhere that it should fix the problem - but not for me
Any ideas how to fix it?
Thanks in advance
Currently, you have the .navigate div z-index set to -1 so it is behind the .main div. Make it greater than the other divs so it's on top. E.g. z-index: 101;
Got it working!
Just added:
position: relative;
to the .main-div
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
If I understand this correctly , there is no way to get a link to work if there is another div overlapping on top of the link , ex. If The nav div is under the main div the links on Nav div will not work
but..
if you want the div with the links on top - poistion them relative or absolute or fixed , and set the z-index to any number higher then the div you want behind
use negative margin for the div you want to over lay for example
.overlay-div{margin-top:-20px;}