[matthewseanmclachlan]

Hi! I have recently switched over to the Catch Flames Pro version. My website is: Trendfly.org My questions are I would like to

1. Increase the thickness of the fixed header menu.
2. Change the color of the fixed header menu.
3. Place a logo over the fixed header menu.

On my website the first post is a photo shop mock up of what I would like to do with the site.

Thanks,
Matt

[Sakin]

@matthewseanmclachlan:
1. To increase the thickness of the fixed header menu, you can increase the padding top and bottom of menu items in the following css as per your need and then add it in “Appearance => Theme Options => Custom CSS” box:
#access-top ul.menu a { padding-top: 12px; padding-bottom: 12px; }

2. You can change the color of Fixed header menu from “Appearance => Theme Options => Color Options => Menu Color Options => Header Top Menu Color Options”

3. To add logo in Fixed header top, go to “Appearance => Theme Options => Fixed Header Top Options” and then check “Enable Fixed Header Top” and then upload it in “Logo in Fixed Header Top” box.

Your photoshop moke up is quite different then the question you have asked. As per your photoshop mokeup.
1. It’s not menu height. But you want to add padding above the menu. So, instead you need to add the following css:
#header-top { padding-top: 30px; }

2. Then for Fixed header top background color, it will be as below:

#header-top {
	background: #ea3b36;
	background: rgba(234, 53, 54, 0.7);
}

Then you can change menu text color from “Appearance => Theme Options => Color Options => Menu Color Options => Header Top Menu Color Options”

[matthewseanmclachlan]

Sakin, thank you so much! So far so great! Okay, I would like my logo larger. I’m not sure why it is appearing that small I would also like it to overlap with a drop shadow as in the mock up I have.

Thanks in advance!

[Sakin]

@matthewseanmclachlan: Ok your logo in too large. Please crop your image to just 160px height and upload it. It’s not good for site loading. Also you need to add shadow in your log itself.

After that, remove the following css from your custom CSS:
#header-top { padding-top: 30px; }

Then add the following css:

#top-logo img {
    margin-bottom: -70px;
    max-height: 160px;
}
#access-top .menu {
    bottom: 10px;
    position: absolute;
    right: 0;
}
#access-top ul.menu a {
    font-size: 16px;
}
@media screen and (max-width: 940px) {
    #top-logo img {
        max-height: 150px;
    }
}

[matthewseanmclachlan]

Hi Sankin,
Making great progress but perhaps I’ve messed up copying and pasting your code because now the fixed header is no longer visible here is the code I have in my CSS:

#top-logo img {
margin-bottom: -70px;
max-height: 160px;
}
#access-top .menu {
bottom: 10px;
position: absolute;
right: 0;
}
#access-top ul.menu a {
font-size: 16px;
}

@media screen and (max-width: 940px) {
#top-logo img {
max-height: 150px;
}
}
#header-top {
background: #ea3b36;
background: rgba(234, 53, 54, 0.7);
}

[matthewseanmclachlan]

Hi Sankin,

I was able to fix the problems I was having. I believe this problem is now resolved. Except for I would like to add a drop shadow to the fixed header menu. The demo of the Catch Flames Pro has one. Once I am able to add this effect I will match it to the drop shadow I will give to the logo.

Thanks!
Matt

[Sakin]

@matthewseanmclachlan: You can add the following css. Also you can change box shadow details, color and opacity as per your need.

#header-top {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
    position: relative;
}

[matthewseanmclachlan]

Hi Sakin,

I also wanted to see about increasing the size of my logo and menu options a bit. Is that something I should do in the CSS code you gave me? Or should I resize the logo from 160×160?

Thanks again!
Matt

[Sakin]

@matthewseanmclachlan: Editing your logo to 160px will be best as per the loading issue to be considered.

[matthewseanmclachlan]

Great, thanks again Sakin!

[Susan]

@sankin I want to change the color of the Header Top Menu. However, I don’t have an option to change the color of the Header Top Menu in the Color Options menu under Customization. I can change the color of all the other menus. Suggestion?

I’m using Clean Journal Pro

[Sakin]

@skstewart: For Clean Journal Pro, please post it in https://catchthemes.com/support-forum/forum/clean-journal-pro-premium/. Then you will get Custom css to change the color. Also post in your site URL and color code that you want to change to.

[Emanuel]

Hi Sakin,

I want to put a Head Banner in the top of my website.

In your oppinion what is the recommended picture size?

I want that the banner goes to one side to another of my website. (almost all screen)

I´m thinking about 1900*400.

Thanks!

[Emanuel]

Hi Sakin,

I want to put a Head Banner in the top of my website.

In your oppinion what is the recommended picture size?

I want that the banner goes to one side to another of my website. (almost all screen)

I´m thinking about 1900*400.

http://allbestdrones.com/

http://howtostartmakingmoneyfromhome.com/

Thanks!

[Sakin]

@emagom: Yes, 1920 is good size and the image size depends on the which screensize are you targeting on. You can add the following css in “Appearance => Theme Options => Custom CSS Options” box:
#header-content .wrapper { width: 100%; }

[Author]

Posts