One approach would be to fix the header on the page. To do this, you can add:
.tc-header {
position: fixed;
}
to your Custom CSS.
This will take your header out of the normal html flow, though, so the slider will shift to the top of the page. So you need to add something like this:
#customizr-slider {
padding-top: 135px;
}
to your Custom CSS, to bring the slider back down again.
Note that as your screen goes narrower than 979px, your navbar will “collapse” responsively, and the above padding size will need to be changed, as your navbar becomes taller. However, if you keep your navbar fixed on small screen sizes, you are really storing up problems for your users, because half their mobile screen will be taken up with header and they won’t be able to see your site at all well.
So I would recommend you switch off the fixed header on smaller screen sizes. To do this, add this:
@media (max-width: 979px) {
.tc-header {
position: fixed;
}
#customizr-slider {
padding-top: 0;
}
}
A completely different approach would be to make the “Back to top” link (in the bottom right) always available This way, users are always only one click away from the menu. To do this, you could use something like this:
.back-to-top {
position: fixed;
bottom: 20px;
right: 10px;
}
Hey EletricFeet, I wanted to try the “Back to top” link but when I put in the custom css nothing showed up. I also tried the other method but I don’t what I should expect to see.
I put both in the custom css in the customized section. Do I need to place this code somewhere.
For the back to top I think I’m just missing the where you want me to put the “Back to Top” text in the function.php child them or custom css
Ok, I was looking at some examples from other people that are using this theme and the “back to top” link is in the footer. Most people have it in the footer but I think I’m going to need it where the social buttons are on the page
You need to put the following in Custom CSS:
.back-to-top {
position: fixed;
bottom: 20px;
right: 10px;
z-index:250;
}
(I added a line in there to make sure that the text always shows in front of any other content on the page.)
Using the bottom and right (or left) declarations, you can place it wherever you want on the page.
I placed this code in the custom css and its not showing up for me on any of my pages
.back-to-top {
position: fixed;
bottom: 20px;
right: 10px;
z-index:250;
}
http://shadesofhappiness.com/about-us/
Can you show me what it suppose to look like?
For what it’s worth…I have done essentially the same thing…it works…BUT…
Looking at your site…you have replaced it with a logo…could this be why the back-to-top is not working?
I’ve setup a child theme and have implemented the following in the function.php for the child theme:
add_filter(‘tc_colophon_right_block’, ‘my_image’);
function my_image(){
$img_url = get_stylesheet_directory_uri().’/imgs/hdfooterlogo.png’; //put your image in child-theme/imgs
$width = ‘250px’; /* change these values */
$height = ’79px’; /* ^ */
$img = ‘<img alt=”logo” src=”‘.$img_url.'” width=”‘.$width.'” height=”‘.$height.'” class=”pull-right”>‘;
return ‘<div class=”span4 right-image”>’.$img.'</div>’;
}
I took out this code to see if its effecting it and it is. The logo is covering up the back top link. This function is replacing the back to top link so I have to figure out how to have both the link and the image together
I am not an expert…I do not think it is just covering it up or else ,afaik, the css should still have worked…it is completely eliminating it…
As to how to fix it, so you can have the best of both worlds, I am not talented enough to help…sorry.
Ok np, so overall I need to figure out how to show the “back to top” link within the following function:
add_filter('tc_colophon_right_block', 'my_image');
function my_image(){
$img_url = get_stylesheet_directory_uri().'/imgs/hdfooterlogo.png'; //put your image in child-theme/imgs
$width = '250px';
$height = '79px';
$img = '<a href="http://www.hunterdouglas.com/" target=_blank><img alt="logo" src="'.$img_url.'" width="'.$width.'" height="'.$height.'" class="pull-right"></a>';
return '<div class="span4 right-image">'.$img.'</div>';
}
I found a function that does something like this:
add_filter( 'tc_colophon_right_block', 'my_colophon_right_block' );
function my_colophon_right_block() {
$use_child_base = false; //change this to true if your image is in child theme
$base = ( $use_child_base ) ? TC_BASE_URL_CHILD : TC_BASE_URL;
$path = 'inc/img/1393356512_icon-ios7-arrow-back.png';
$mybacktotop = sprintf('<div class="%1$s"><p class="pull-right"><a class="back-to-top" href="#">%2$s</a></p></div>',
apply_filters( 'tc_colophon_right_block_class', 'span4 backtop' ),
'<img src="'. $base . $path .'">'
);
return $mybacktotop;
}
Working to see how I can combine the two
Having it in the footer would not be bad but if its causing some issues I would like to see if it can be in the page but whatever works
So what are you now trying to do?
I fixed this issue so we are good. Thanks
