a client has asked if he can have the header area of his site static so it is always visible?
I am using the Eris template: http://hogash-demos.com/themeforest/?theme=eris_joomla
My site is: http://www.negotiumrecruitment.co.uk/dev
The top area with the logo, contact info and navigation plus the line below all wants to stay where it is and when scrolled, the whole site moves up and the top area always remains visible.
Thank you in advance.
Paul Walker
You can try:
#rt-header {
position: fixed;
top: 0;
width: 100%;
}
An element with a fixed position is positioned relative to the browser
window, and will not move even if the window is scrolled
Source: http://www.w3schools.com/css/css_positioning.asp
Edit: seeing the website you proveided, you will also need to change your #rt-logo CSS rule. It's currently 'absolute' and should be 'fixed' instead:
#rt-logo {
display: block;
position: fixed; /* Instead of 'absolute' */
left: 50%;
top: 0;
margin-left: -470px;
z-index: 9999;
}
This is because your logo stays outside your header in your template. Normally it would be inside the header and you wouldn't need this.
Related
currently I have troubles with bootstrap5 and modal respectively glightbox.
when switching back from these applications, the static navbar shakes horizontaly.
the same with glightbox, additional to that the sticky footer also slides up when the screen is grayed out.
deliberate specific features: sticky footer, vertical scrollbar always on
fullscreen sample: https://codepen.io/manu_g/full/dyZOdbV
Inspecting your codepen, I observed that the margin-left and margin-right of the child element of the #header increases, when the modal opens.
When you leave modal, margin-left and margin-right are returning back to their initial values, causing the shake.
The fixed position seems to be the root of cause. Thus, I would go with position: sticky instead and add some margin top in the .inner-pages.
For example,
.fixed-top {
position: sticky;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.inner-page {
margin-top: 50px;
}
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
I've been asked to change the layout of this charity website:
http://antidotemarketing.com/youthlife/
I need to place the nav up the top, then the logo underneath, then under that the white box containing the slider and main content.
This must be done using CSS only.
So far I've had difficulty getting the same results in both Chrome and FF... I haven't even checked IE yet. How would I go about positioning the logo in the middle of the nav and the main content box with some adequate spacing (say 20px top and bottom)
One more issue: I can't absolute position the logo because when people log in to wordpress, the header that wordpress injects into the top messes up the spacing of everything.
Thanks everyone :)
OK, I think I finally understand what you are after. Try adding the following styles:
#logo {
position: absolute;
top: 80px;
z-index: 100;
}
#login #logo {
position: relative;
}
#page {
margin-top: 45px;
}
I am looking to create a situation where some nav buttons are sticky to the edge of the browser windows, I am assuming some css and javascript, it has been a long time since I did any coding and I am wondering if someone could point me in the right direction.
http://www.flickr.com/photos/66009984#N00/6824355131/
Make the buttons position absolute or static depending on if you want them to scroll with the page or not.
.buttonLeft {
position: absolute;
left: 0
}
.buttonRight {
position: absolute;
right: 0
}
If you want them inside another div than that parent div needs to have it's position set relative.
.parentContainer { position: relative }
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block