bigger logo in the header

Tagged: header, image, logo, size

This topic has 15 replies, 4 voices, and was last updated 9 years, 5 months ago by kate-upton.

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

Author

Posts
December 17, 2015 at 11:07 pm #81299

FOEC
Member

Hi,

I have on my website the adventurous pro theme and I have a issue with my logo in the header. I don’t know why but it’s really small. I can’t find a way to have it bigger.
see it yourself : http://ccof-foec.org/

Even if I change height or width of the picture, it doesn’t work.

Thanks for your help.

December 17, 2015 at 11:32 pm #81302
FOEC
Member
I saw this post : http://catchthemes.com/support-forum/topic/adventurous-pro-logo-size/

I try to change this:
```
#site-logo img { max-height: 41px; }
#masthead.fixed-header #site-logo img { max-height: 32px; }
```
the 41px for 100px
and the 32px for 41px

And it didn’t work. 🙁
December 18, 2015 at 12:22 am #81309
FOEC
Member
Okay, it work. I went to Appearance => Theme Options => Custom CSS
And I put
```
#site-logo img { max-height: 70px; }
#masthead.fixed-header #site-logo img { max-height: 32px; }
```
But now if I put the logo too big, like 70px height the first menu bar goes up to much :S
(Home, About Us, Volunteer Zone, Contact Us, FR)
Can I put it lower?
December 18, 2015 at 12:56 am #81310

FOEC
Member

December 18, 2015 at 10:41 am #81326
Mahesh
Participant
Hi @FOEC,

Thank you for using Adventurous Pro.
Assuming the current logo’s height, here is the Custom CSS for centralizing the menu bar vertically.
Go to “Dashboard=> Appearance=> Theme Options=> Custom CSS” box and add the following CSS:
```
@media screen and (min-width: 981px) {
    /* Centralizing the menu bar */
    #masthead #header-right {
        margin-top: 20px;
    }

    #masthead.fixed-header #header-right {
        margin-top: 0;
    }
}

/* For changing color for Donate Now. */
#secondary-menu ul.menu #menu-item-343 > a {
    color: #ff0000; /* Your desired color's hex value */
}
```
Let me know if this helped.

Regards,
Mahesh
December 18, 2015 at 10:18 pm #81346

FOEC
Member

Hi @Mahesh,

For the “Donate Now”, the CSS code only change the color of the font. Not the background (the square). Do you think its possible to change the blue background only of the “Donate Now” to another color?

And for the menu bar, I would like to align the bottom edges of the logo and menu bar.
Not centralized. Sorry about that, maybe I was not clear.

Thanks for your help!

December 20, 2015 at 10:15 am #81428
Mahesh
Participant
Hi @FOEC,

For changing both the color and background color of “Donate Now”, replace
```
/* For changing color for Donate Now. */
#secondary-menu ul.menu #menu-item-343 > a {
    color: #ff0000; /* Your desired color's hex value */
}
```
with this
```
/* For changing color and background color for Donate Now. */
#secondary-menu ul.menu #menu-item-343 > a {
    color: #ffffff; /* Your desired color's hex value */
    background-color: #0000ff; /* Your desired color's hex value */
}
```
For the menu bar, I think you’ve managed it already.

Regards,
Mahesh
December 23, 2015 at 3:40 am #81540

Danielle
Participant

Hello @mahesh,

I’m experiencing the same problem: after resizing my logo to 88px, the primary menubar goes up. Can you please tell me the CSS code to place it lower? I’m using the Full Frame Pro theme: http://www.daniellebosveld.nl.
Thanks in advance!
Danielle

December 23, 2015 at 11:05 am #81565
Mahesh
Participant
Hi @Danielle,

Thank you for using Full Frame Pro.

Please add the following CSS in “Dashboard=> Appearance=> Theme Options=> Custom CSS” box:
```
#menu-hoofdmenu {
	margin-top: 43px;
	margin-left: 5px;
}

#header-toggle{
	margin-top: 43px;
}
```
Regards,
Mahesh
December 23, 2015 at 6:29 pm #81577

FOEC
Member

Hi @Mahesh,

Thanks! It work like a charm 🙂
Is it possible to have the same thing for my french website? (Donate Now = Faites un don)
http://fr.ccof-foec.org/

December 23, 2015 at 7:27 pm #81581

Danielle
Participant

Many thanks @Mahesh! It works great 🙂

Regards, Danielle

December 24, 2015 at 9:53 am #81612
Mahesh
Participant
Hi @FOEC,

For your French Website: http://fr.ccof-foec.org/ add the following CSS in “Dashboard=> Appearance=> Theme Options=> Custom CSS” box:
```
#secondary-menu ul.menu #menu-item-1060 > a {
    color: #fff;
    background-color: #0000ff;
}
```
Regards,
Mahesh
December 30, 2015 at 6:32 pm #81919

FOEC
Member

Thanks @Mahesh ! 🙂

January 8, 2016 at 10:55 pm #82468
FOEC
Member
Hi @Mahesh,

can I ask you how do you find the number “1060” or 343″ in the CSS code you gave me.
```
/* For changing color and background color for Donate Now. */
#secondary-menu ul.menu #menu-item-343 > a {
    color: #ffffff; /* Your desired color's hex value */
    background-color: #0000ff; /* Your desired color's hex value */
}
```
```
#secondary-menu ul.menu #menu-item-1060 > a {
    color: #fff;
    background-color: #0000ff;
}
```
Because the problem now, is that I made a new page “Donate Now” and I don’t have the blue square anymore… Same for my french website.
January 11, 2016 at 9:48 am #82627
Mahesh
Participant
Hi @FOEC,

It is the id of the menu item, you can find it out by right clicking the page and select inspect element or with a firebug.

//For your english site
```
#secondary-menu ul.menu #menu-item-1453 > a {
    color: #fff;
    background-color: #0000ff;
}
```
//For your french site
```
#secondary-menu ul.menu #menu-item-1710 > a {
    color: #fff;
    background-color: #0000ff;
}
```
April 5, 2016 at 12:21 pm #88845

kate-upton
Participant

the logo image is being scaled by Layers to keep the header at a size that allows the content below it to sit at an ideal place in the browser window. This is doubly important if the Overlay or Sticky header option is enabled, as a larger logo will increase the height of the header bar, causing it to overlap.
Author

Posts