I am using Bartik sub-them on Drupal7 and I am currently changing styles. What I have got is a n unwanted paralax-type of effect on the page. You can try it here just scroll down and you will see how the header is left in the background while the other part of the page covers it.
What do I need to chnge in the CSS to make the header stick with the page?
The position of the header on your CSS should be identified. Try making it static, absolute, relative or inherit. I'm sure that your problem concerns the position.
Related
I'm using WPBakery on this wordpress site. I'm using an element called pageable content container as you can see on the front page. It has several slides which are changing every few seconds.
My problem is that every time the slide changes the container changes its size and gets smaller until the animation is finished. The whole bottom of the site moves. There are options to turn of or change the animations but it doesn't seem to do the trick. It just looks ugly.
My guess is that I have to give the container a fixed size via CSS? Or is there any other way? Appreciate your help.
I already tried everything whithin the WPbakery user interface. I can't turn of the basic animation which comes from bottom to top.
I also tried giving it an extra css class name and editing the custom css with height. But it didn't work
Try setting a minimum height for .vc_tta-panels. I tried this and it seems to have fixed it. However, the height of each slide will change depending on the amount of content you have in it...
.vc_tta-panels {
min-height: 200px;
}
In WordPress theme, there are sticky and fixed headers. I am confused about their difference. In my opinion, sticky header is the one which sticks on the top while user scrolls page up/down. And the fixed header moves with the page scroll.
Some websites use the term Sticky and fixed alternatively that means both are same. Then what that header is called which moves with the page scroll?
I suppose the fixed header is always on the same position during the page scroll.But the sticky header maybe scroll with the page at first, and from a certain point it goes to the fixed type. Just like the right subnavigation of bootstrap document. http://v3.bootcss.com/css/
Also bootstrap provide a js plugin to achieve the sticky effect http://v3.bootcss.com/javascript/#affix
I have a web page with a fixed position header (Z-index:1000). The body of the page is a lower z-index and scrolls underneath the header.
When I pinch/zoom the page on my smartphone, the header is detached from the webpage and zooms separately, overlapping the body.
I want the header to remain on top of the page attached.
Here is the link: TEST PAGE
This has always been an issue with touchscreen devices. I don't believe there is a pure css solution for this, since the pinching/zooming will move the entire viewport, and not just the element that you are touching. You may have to resort to a javascript based solution. See here for an extensive list. http://bradfrostweb.com/blog/mobile/fixed-position/
I have a page with fixed position of header on scroll. Similar as on StackOverflow top menu.
I need use height = auto because I can show information in single or multiple lines. If I have used two or more lines than my header is shown over the main text of page.
I can solve this with JS script by set body margin-top = header width.
How I can solve this situation only on CSS without JS?
I don't think it can be done purely with CSS. Elements with position: fixed are taken out of normal page flow, and so they are not used in calculating position of other elements on page.
I suppose you could render two headers, one with position: fixed, and other one without such declaration (and maybe with 'active' page elements, like links, input fields or buttons replaced with static text), used only to move other page elements down. That would be a terrible hack, though.
When master page parsed content div always is at the very bottom. So how i can set footer to be at the bottom while not using position absolute. If you use position absolute you have to set every different page height and footer position according to the this is which i don't want. Thank you.
The most practical solution is to set a min-height in your CSS of around 700px for the main content area between header and footer.
Alternatively, you could try this (but not tested yet in modern browsers):
http://codersbarn.com/post/2008/09/10/CSS-Sticky-Footer-for-ASPNET-Master-Page.aspx
This is something I needed to implement recently on a project.
Checkout the following jsFiddle: http://jsfiddle.net/uHZgY/
Edit (Based on comment)
If what you require is a floating footer, then checkout this other SO question: How do I get a floating footer to stick to the bottom of the viewport in IE 6?.
The correct answer implements this without the need for absolute positioning of the main content.
I have taken the correct answer and created a jsFiddle for you so you can check it out.
http://jsfiddle.net/mStef/