Thanks for the fast reply. I accomplished this a different way, and want to make sure this is ok. I added this custom code to the Quick CSS to shrink the header area of the fixed header with social icons:

.social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 88px; line-height: 88px; }
.fixed_header.social_header #main{ padding-top:119px; }

My site is at redcom.wpengine.com

Hey . . . thanks for your quick response. I added that but now I notice more issues when the display width is reduced . . . the menu pushes in to the logo and in a narrow display for the phone there is extra space and the logo is not centered.

Don’t take this wrong because I really appreciate the fast support but I have to say all this modification and the continued issues seems crazy because the only thing I’ve done is added my own custom logo . . . I used the dimensions given right on the theme options page.

Doesn’t seem like it should be this complicated just for that . . . I would assume that every person who uses this theme will at least update the logo with their own custom.

I’ve had to add all the CSS listed at the end of this message get the logo to display correctly and it’s still not working.

I can’t imagine that with as many of these theme’s you’ve sold and as good of ratings as you’ve gotten that everyone has to go through this process for the most basic of customization?

Can we take a look at this issue from the beginning and see if there is not a simpler solutions? I just want to add my custom logo, which I’ve sized correctly, to display in the site. I don’t want it to shrink down tiny.

Thanks!

.logo, .logo img {
max-width: 340px !important;
width: 340px !important;
height: auto !important;
max-height: none !important;
}
.logo img{
position: relative;
top: -40px;

}

#header_main .container, .main_menu ul:first-child > li > a {
height: 88px !important;
line-height: 88px !important;
}

html.fixed_header #main {
padding-top: 88px;
}

.logo a {
max-height: none !important;
}

.header_bg {
opacity: 1;
filter: alpha(opacity=100);
}

• This reply was modified 12 years, 1 month ago by casidougal.

Perfect as usual!

Thanks Ismael. You guys are awesome!

Thanks! I added that but when I scroll down (using a sized down browser window) I can still faintly see the text behind the header when it scrolls up.

Here are the full contents of Quick CSS

.logo, .logo img {
max-width: 340px !important;
width: 340px !important;
height: auto !important;
max-height: none !important;
}
.logo img{
position: relative;
top: -40px;

}
body {
font-size: 15px;
}
.avia_message_box_content { text-transform: capitalize; }

#header_main .container, .main_menu ul:first-child > li > a {
height: 88px !important;
line-height: 88px !important;
}

html.fixed_header #main {
padding-top: 88px;
}

.logo a {
max-height: none !important;
}

Hi again . . . there’s another issue I noticed after doing this. The logo looks fine in terms of sizing but when a user scrolls down in the browser then the header div shrinks in height and the logo is cut in half. I’d like that header to always stay the same size even if someone scrolls down.

I saw the two solutions for what sounded like similar issues posted on this theme’s support page in Themeforest and I tried both but they didn’t work for me.

I tried modifying one solution to:
#header_main .container, .main_menu ul:first-child > li > a {
height: 88px !important;
line-height: 88px !important;
}

html.fixed_header #main {
padding-top: 88px;
}
With the above the header stays the same height but the lower content scrolls up and under the header, and the logo image is cut in half.

The page is here: http://calleridnotes.com/homepage

Thanks!

This thread was closed but the problem is not solved. What do I do? Repost it?
Sorry, Yigit, neither of the answers above work.

Here is my code:
/* Testing- Get Reserve button on iPhone*/
@media only screen and (max-width: 480px) {
.header-buttons {
left: 0!important;
}
}
/* Testing – Remove Layer Slider on Smartphone*/
@media only screen and (max-width: 480px) {
#layer_slider_1 { display: none; }}

Update 19Jan2014-
I was able to correct this using this code:
/* Testing – Remove Layer Slider on Smartphone*/
@media only screen and (max-width: 480px) {
/* Add your Mobile Styles here */
#layerslider_10 {
display: none!important; }
}
/* Get Reserve Now button on iPhone*/
@media only screen and (max-width: 480px) {
.header-button {
position:absolute;
top:90px;
left:30px;
right:20px;
}
}
Note: Layerslider is one word.

• This reply was modified 12 years, 1 month ago by Lynnr321.

Thank you for the code. I tried it out.

The search bar appeared but on top of the logo.

I am using a child theme. I placed the header code in the adult theme and the style code in the child theme.

Could this be the cause?

Ismael,

The code above for image height worked for desktop. On phone it reverts back.

Regarding that code. I was trying to use that CSS to stop the featured image from showing up on the blog post. But it looks like it prevents also on the main page when I use the ““blog posts” element in the layout tool. Is it possible to have it only show up on the main page but still prevent it from showing at the top of each blog post?