Fixed Menu Header: Increasing size, changing color and logo placement

This topic has 14 replies, 4 voices, and was last updated 8 years, 10 months ago by Sakin.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
August 2, 2015 at 9:52 pm #61983

matthewseanmclachlan
Participant

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

August 3, 2015 at 10:39 am #62000
Sakin
Keymaster
@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”
August 4, 2015 at 7:10 am #62050

matthewseanmclachlan
Participant

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!

August 4, 2015 at 10:46 am #62054
Sakin
Keymaster
@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;
    }
}
```
August 5, 2015 at 6:22 am #62103

matthewseanmclachlan
Participant

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);
}

August 5, 2015 at 7:10 am #62109

matthewseanmclachlan
Participant

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

August 5, 2015 at 8:18 am #62118
Sakin
Keymaster
@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;
}
```
August 6, 2015 at 7:07 pm #62277

matthewseanmclachlan
Participant

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

August 10, 2015 at 10:28 pm #62691

Sakin
Keymaster

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

September 9, 2015 at 9:06 am #66485

matthewseanmclachlan
Participant

Great, thanks again Sakin!

February 9, 2016 at 9:51 pm #85039

Susan
Participant

@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

February 10, 2016 at 2:41 am #85051

Sakin
Keymaster

@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.

February 24, 2016 at 2:20 am #86148

Emanuel
Participant

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!

February 24, 2016 at 2:21 am #86149

Emanuel
Participant

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!

February 24, 2016 at 8:15 am #86156

Sakin
Keymaster

@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