Slider image does not go to the top

Hi, in the slider images in your example template, the image goes all the way to the top behind the logo and navigation, which sits nicely on top.

However, if you look at my site, there is an ugly grey bar above the image and the image does not go seamlessly to the top.
http://skycron.com/studio/

Also, I want my logo to appear is 100x100 px. The theme automatically resizes it, which I don't want, and as a result it displays too small and I don't know how to have it appear as its native resolution.

 

1. Paste this in the Custom CSS for the logo size and change the px to the desired dimensions of your logo:

.header_wrapper .logo img{
width:370px;
max-height:90px;
}

2. Use this to set the distance from the top for your slider:

.flexslider{
margin-top:200px;
}

Here is some addition code that also sets the distance from the top when the browser width is more narrow:

@media only screen and (max-width: 767px) and (min-width: 480px){
.flexslider{
margin-top:0;
}
}

@media only screen and (max-width: 480px){
.flexslider{
margin-top:0;
}
}

A few things to also consider: if the image in the slider is going to be underneath the menu and logo, the logo background needs to be transparent. Also, the image should not have a lot of distracting items in the top portion. There is a free softsware called "GIMP" that is very easy and user friendly. Here is the tutorial: http://www.wikihow.com/Make-a-Transparent-Image-Using-Gimp

 

I don't see the Custom.css file in the editable files in WP. I see the Tag Template, Single Post, Contact Page, etc and all of the source code to edit, and style.css at the bottom, but not that. Where is it?

Additionally, where in the Custom.css file would I put this text (for both logo mod and slider)

Cory

 

I was able to find the Custom area and make the logo bigger. Thanks.

However, I tried your other code for the slider, but it still does not go all the way to the top -- it only goes to the line at the bottom of the navigation menu. I copied and pasted your code, both without the addition code and with the addition code, and still it does not work. What is the problem?

http://www.skycron.com/studio

 

This is the code that tells the theme how far from the top the slide should be:

In your WP admin: Appearance > Theme Options > Styling Options

.flexslider{
margin-top:200px;
}

I personally do not like that grey header background image and always replace it with the attached white version. You'll need to login via ftp and go to:

wp-content > themes > roadfightertheme > images > rename the current header-bg.png to header-bg-orig.png (in case you ever need it) then upload the file I attached here...

OR...

simply try this and edit the min-height:

.header_container.not_home{
background: none;
min-height: 220px;
border-bottom: none;
}

 

Hi Roger,

Thanks. I tried it, and it looks fantastic, on the main page at least where the slider is.

However, now I have a new problem. On every other page, the menu is pushed over everything else as a result of the change, and it just looks awful. I just wanted the slider on the main page to be affected, not have it change all the other pages. It's a mess.

Is there a way to keep the positioning JUST for the main page with the slider, but have every other page the way it was? As it looked great with the grey background at 220, the way it was.

Thanks
Cory

 

1. If you want to use the grey then don't change the header-bg.png to the file I provided since that one is white. Go back to original.
2. Did you use the first few codes in #1 or the alternative in #2?

 

I tried all your codes codes, all three of them -- and it didn't do anything at all. It always keeps the grey banner at 220 pixels. The only thing I could get working was reducing it to 0, and it applies it across all the pages.

 

I see your homepage slider is flush along the top. Is that what you want? Please note that the code I gave you above is really HP slider related.

And on all other pages, what do you want? I see you still have the breadcrumbs and they are along the top then your background begins. I'm not a fan of breadcrumbs for this theme since the menu is so big. If you want to remove them use this:

#crumbs{
display:none;
}

Also, try removing your background and see if everything comes back down below the menu on the other pages. If this doesn't work you may just want to reinstall the theme and add one custom code at a time to test. All of the codes with flexslider in it are related to the HP slider and how it appears when the screen is at different widths. This is what makes that responsive and should have no effect on other pages.

 

Yes, that is what I want. I want it to look like this:




But for the rest of the site, I want this:

 

Hello,

Go to the Dashboard > settings > reading
and set it to default as shown in the image given below.

 

That worked amazingly!! Thank you so much! And the blog displays nicely on the left next to the testimonials, too. Looks fantastic.