I am trying to shrink the header after scrolling. I am working on the child theme.
Here is a screen shot of how the header looks at the top of the page
This is how it looks when scrolled down a little
This is how I want it to look upon scrolling
I added this css to the child theme to make the logo bigger:
.site-logo{
max-height:200px;
}
I want the max-height to shrink to 100px upon scrolling. I dont know how to do this. Please help.
I added this css and it worked perfectly.
.site-logo {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.float-header .site-logo {
max-height: 100px;
}
I found the solution to my problem from one of the questions posted on aThemes support page.
Related
This is my first question on stack exchange so feel free to let me know if I haven't included enough information. I've looked for a solution to my particular issue and found nothing relevant so here goes...
I'm trying to achieve a sidebar navigation that slides in upon a menu button being pressed. The rest of the page should slide with it so it flows smoothly. I have used some simple javascript to toggle on/off a .active class for the navigation sidebar div and the content-wrap div. For reference, this is what I'm trying to do: http://antrikshy.com/. The transition property is applied to both the sidebar div and content-wrap element but is only affecting the navigation bar. After inspecting the webpage, I can see the css properties have been applied to the content-wrap element successfully, but they don't work. This has been tested in safari and firefox with no change in results.
See the Pen sidebar transition example on CodePen.
Here is the individual css on the content-wrap:
.content-wrap {
position: relative;
transition: all ease 2.5s;
padding: 10px;
overflow: auto;
}
You need to define both sides of the transition. If you are transitioning on left you need the left attribute of 0 so the transition has a starting point.
.content-wrap {
position: relative;
transition: all ease 2.5s;
padding: 10px;
overflow: auto;
left:0 /* THIS */
}
On my browser that fixes your pen -- https://codepen.io/anon/pen/EvKQxR.
I'm working on a new HTML5 CSS3 template which features a parallax scrolling header, as well as sticky navigation menu and a scroll to top link.
I've gotten the elements working individually, however, there are a few CSS rules for the parallax header which are breaking the sticky navigation and scroll link, and it's doing my head in!
The CSS rule:
html {
height: 100%;
overflow: hidden;
}
Breaks the ability to use Javascript/jQuery scroll events
$(window).scroll(function() {
alert("Hello!");
});
Never fires the event, but commenting out the CSS rules and it works.
Secondly, the parallax effect requires the CSS perspective rules set, and these seem to break position:fixed
body {
-webkit-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
These rules prevent any element from being position:fixed, such as the sticky navigation and the scroll to top link.
I'm looking for solutions which allow for all three elements to work together. I'd rather try and avoid doing the parallax in jQuery changing the background-position property, but if that is the only way then that's what I'll have to do.
Open to any suggestions.
I've a working example on CodePen to play with - https://codepen.io/timtrott/pen/vZVOwq
I've left the rules commented out so you can see how the sticky nav and scroll to top links work. Uncomment the rules and the header work nicely, but not the navigation or link.
Thanks in advance for any suggestions :)
Updated:
Change it from:
header::before {
position: absolute;
}
to:
header::before {
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
-moz is for Mozilla;
-webkit is for Chrome.
Hope it should work.
If you go to https://www.biznessapps.com on mobile layout, inspect element in Google Chrome and disable overflow-x: hidden from body and resize again, then you will find the white vertical stripe (padding) in the right side.
I had to add overflow-x:hidden to body to hide this, but not sure what causes this. Is there any other way than using overflow-x:hidden ?
So what you are doing with the overflow-x solution is a viable solution, but if you'd like to learn how to debug ghost elements, read below:
Basically, I debugged your site and saw that some of your sections (mainly ones in columns of 2 or 3, that float) extend past the wrapper's width. You can see this as well by inputting this into your CSS
*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Scroll down and look for sections that extend past the main div, such as this:
Most of these are the results of a little extra margin or padding on the floated section.
Like I said, the width:100%; and overflow-x:hidden; is still a very common solution, this is just how to debug it if you'd like to fix the structure.
Hope this helps!
It's a scroll bar. Since the default behaviour for overflow is to add the scroll bar,
overflow-x: visible;
might be the correct way to go.
Scrollbar some times visible and shows like extra padding or margin in body hiding overflow-x will work.
html, body {
width: 100vw;
overflow-x: hidden;
}
I have a JSBin with a page, and a functional sliding nav. The only thing wrong with it is that it resets the scroll position when I open the side navigation. I use a jquery click event to toggle the nav and move the page to the side. When it moves the page over, it sets the position fixed, and moves it over 200 px. I have tried to use jquery to record the scroll position before the nav is toggled, and set it back when it isn't fixed, but after trying to use other examples, they won't work. I don't know if there is something wrong with my script, or I could use css another way.
The JSBin is here
I would like to not introduce anything but html, css, js, or jquery in the answer.
This worked for me:
Javascript:
$('.c-hamburger').click(function(){
if($('.nav').css('width') == '0px'){
$('.nav').css('width', '200px');
$('.body').css('margin-left', '200px');
}else{
$('.nav').css('width', '0px');
$('.body').css('margin-left', '0px');
}
});
CSS:
.nav{
width: 0px;
transition: width 0.5s;
overflow: hidden;
}
.body{
transition: margin-left 0.5s;
}
center{
min-width: 200px;
}
I am working on a carousel - gallery viewer for my website and I have problems with the elements in it.
The images at the bottom are overflowing but only to the left. I have set the overflow property to hidden but it does not seem to work in this side.
In addition, the images are not affected by the property margin-right for some reason, only by margin left.
Here is a demo of the image viewer: http://codepen.io/anon/pen/XbgdWo
This is the code I am using for the image items. I use margin-right to show it is not working properly.
.slider-item img {
width: 100%;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
#include transition('all .2s ease-in-out'); }
.slider-item:hover {
img { #include transform(scale(1.1)); } }
I would really appreciate if you could have a look at it. I have no idea what to do to fix it.
Thanks in advance.
You don't need to have the overflow:hidden on the image itself, just the containing element - which you have.
The effect you are after works fine, you just have an issue with margin - you have put it on the img when it should but on the parent (.slick-slide).
I have forked your codepen here and fixed the issue, I added a red background to the img container so you can see the changes, the code is still messy but it gets the job done. I will continue to refine the code in the same pen.
Your body has 80 percent of width.
First of all, add the following CSS to the body to make it appear properly.
body {
width: 80%;
margin: 0 auto;
}