[jimchicago]

Thank you in advance for your help. I am using Simple Catch (free) to develop a site at  http://www.pmcsconsulting.com/dev.

I have inserted a 976 x 277 logo graphic in the header. How can I eliminate the empty (white) space above and below it?

Also, I thought this graphic would be the same width as the menu bar below it, but the menu is slightly wider. Even when I upload a graphic wider than 976 (I tried 996 and changed the CSS below to say 996), the image’s width is less than the menu’s.

Here is what I currently have in Custom CSS:

#header {

background: none #fff;

}

#header .layout-976 { position: relative; }

#header .social-search { position: absolute; right: 0; top: 20px; }

#header .social-search form.searchform { display: none; }

#header #mainmenu ul li a {padding: 0 24px;}

/* Remove the black border at the top of the page: */

#header .top-bg { background: none; border: none; }

[Sakin]

@jimchicago: Add the following css in “Custom CSS” box in your Theme Options panel.

#header .logo-wrap { padding-left: 0; }
#site-logo a img { max-width: 100%; padding-right: 0; }
#header .logo-wrap { margin-top: 0; }
#header #mainmenu { margin-top: 0; }


[jimchicago]

Great, thank you Sakin! Could you provide a bit more CSS that would:

– eliminate that thin white gap now above the header?
– delete the gray horizontal line spanning the page, just above main content area?
– make the main content area wider and the R-hand sidebar narrower?
– change certain style elements of the main-menu bar?

Thanks, I like how the site is looking with your theme.

[Sakin]

@jimchicago: WOW so many questions.
– eliminate that thin white gap now above the header
#header .top-bg { display: none; }

delete the gray horizontal line spanning the page, just above main content area
#header { border: none; }

make the main content area wider and the R-hand sidebar narrower
— I don’t recommend you to do this as this will make the theme damage.

change certain style elements of the main-menu bar
— What do you mean by this? I am confused.

[jimchicago]

Thanks for those three answers. Re the 4th question: If possible I would like to be able to change the main menu’s height, button colors (both initial and on mouseover), the font color (both initial and on mouseover) and font size of the text in the buttons. Hope this isn’t too much to ask. Thanks.

[Sakin]

@jimchicago: Aha it’s little more I guess for free theme. Anyway I will try to answer it.

To Change the Menu background color
#header #mainmenu { background-color: #000; }

Menu height is control through font line line so decrease it
#header #mainmenu ul li a { line-height: 35px; }

Menu font size
#header #mainmenu ul li a { font-size: 15px; }

Menu hover/active background color and font color
#header #mainmenu ul li a:hover, #header #mainmenu ul li.current-menu-item a, #header #mainmenu ul li.current-menu-parent a, #header #mainmenu ul li.current_page_item a, #header #mainmenu ul li.current_page_ancestor a, #header #mainmenu ul li:hover > a { background-color: #fff; color: #000; }

For more about CSS please use this css guide http://www.w3schools.com/cssref/default.asp

[jimchicago]

Thank you very much, Sakin. Obviously I need to learn CSS more in depth and will work on that. Thanks for the “cheat sheets”.

[table26]

Hello Sakin,

I am having an issue similar to what @jimchicago experienced.  I am using Catch Box Pro and the header image always shows a white margin on all sides.  When I adjust the header settings in theme options so that they are zero for all sides, the image shifts to the left and leaves a large margin on the right side only.

In four hours, I haven’t been able to fix it myself.  Can you please help me figure out how to eliminate any margin around the header image?

Thanks in advance.

Here’s the link to the homepage:  http://036f339.netsolhost.com/HQ/

[Sakin]

@table26: You have header right and left margin set is 3%. Login to your WordPress Dashbaord and then go to “Theme Options => Theme Options => Header Options”. There in Header Right Margin and Header Left Margin make it both 0 and click on Save button.

When you make the Margin 0 on all side. The Image shift to left as your the space will be 1000px when there is no margin and your image size is only 975px that is why it shows 25px white space at the right side. Just upload the image with the width 1000px and remove all the margin. Then it will be fine.

[table26]

Hi @sakin.  Thank you so much for your feedback.  I didn’t realize that making the header image 1000px wide was the solution.  The header area now looks like I wanted it to.  Much appreciated!

[alyssahcanada]

I have a few related questions. I am using Catch Everest theme, and have the vslider plugin installed instead of using the default theme slider.

1. First question is related to jimchicago’s. I want to reduce the white space above and below my logo. I tried the CSS you already provided:

#header .logo-wrap { padding-left: 0; }#site-logo a img { max-width: 100%; padding-right: 0; }#header .logo-wrap { margin-top: 0; }#header #mainmenu { margin-top: 0; }

However it did nothing (I pasted it into the custom CCS box under theme options). Is there another way to reduce this white space or am I doing something wrong?

2. How is it possible to split the background colour horizontally into 2 or more colours. At Appearance>Options>Display Options the only choice is one solid colour.

Also related to colours: is there a way to change the colour of the ‘white space’, i.e. not the page background but the background for the title, logo etc?

3. I am only using the footer widget areas 1 and 3, but instead of having their widths evenly spaced I want to increase the size of footer width 1 and decrease the size of footer width 3. How do I go about doing this?

4. I like the style of sidebar menu at jimchicago’s site http://www.pmcsconsulting.com/dev/ How do I customize the font and style of my current menu?

Thanks in advance for your help – I am new at this but very eager to move forward with it.

p.s. If its possible can you answer without my site URL because Im trying to leave it set on my Coming Soon Landing Page for the time being.

[alyssahcanada]

One more question! I would like the footer widgets I mentioned above to only show up on the homepage, not on any other page on the site. Is this possible? If not, is there another way I can add in an additional text area and sidebar menu (below the three featured articles but NOT the widget area?) to the homepage that wont show up on other pages?

Thanks again!

[tuffejalle]

Hi I have the same problem as alyssahcanada, I can get the white “border” out on top with

#site-logo, hgroup.with-logo { padding-top: 0; }

but I cant get the bottom, right or left to go away…

 

Thanks for all the help!!

 

[Sakin]

@alyssahcanada: You are adding question in Catch Everest theme then please post in http://catchthemes.com/support-forum/forum/catch-everest-public/

this is all mixed up and I am totally confused which theme and which site.

[[email protected]]

Hi Sakin,

I have Catch Responsive, and I’m trying to get rid off the empty space under the logo.

I did try the CSS you put above in this topic, but it didn’t help:

#header .logo-wrap { padding-left: 0; }#site-logo a img { max-width: 100%; padding-right: 0; }#header .logo-wrap { margin-top: 0; }#header #mainmenu { margin-top: 0; }

koma.metropoli.net

 

Best,

Timo

[Sakin]

Hello Timo,

Please post Catch Responsive support in Catch Responsive Private forum only. Not here. This will make others confused.

For now I am answering here but from next time please post in proper forum.

Just add the following css in “Custom CSS” box in Theme Options panel. You can reduce or increase as per your need.
#hgroup-wrap { padding-bottom: 2.5rem; }

Regards,
Sakin

[jihn_1]

Hello Sakin,

I hope you can help me!
How can I eliminate the empty (white) space above and below my logo?
http://www.fulfillsupply.com

[Sakin]

@jihn_1: I just check in your site and found the following CSS in “Custom CSS” box..

#site-logo {
    padding-top: 15px;
}
#hgroup-wrap {
    padding-bottom: 10px;
    padding-left: 50px;
}

Replace the above css with the following:

#site-logo {
    padding-top: 0;
}
#hgroup-wrap {
    padding-bottom: 0;
    padding-left: 50px;
}

[Author]

Posts