Skip to content
Catch Themes Logo

Catch Themes

Premium Responsive WordPress Themes with advanced functionality and awesome support. Simple, Clean and Lightweight Responsive WordPress Themes

  • Home
  • FSE Pro Plugin
  • Themes
  • Features
  • Hosting
  • Support
  • Blog
  • My Account

bigger logo in the header

Support Forum Adventurous Pro | Premium WordPress Theme

Tagged: header, image, logo, size

  • This topic has 15 replies, 4 voices, and was last updated 6 years, 9 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

    screenshot

    December 18, 2015 at 10:41 am #81326
    Mahesh
    Keymaster

    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
    Keymaster

    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
    Keymaster

    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
    Keymaster

    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
    Keymaster

    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
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘bigger logo in the header’ is closed to new replies.

Support Forum Instructions

Use the search box below to search for your answer and also check out theme instructions at Theme Instructions before posting question here.

When you post in your question, please don't forget to post in your site URL. If you have issue in posting question here in forum then check out screencast from our YouTube channel.

Notice: Support Forum Now Requires User Moderation to Avoid Spammers

Search Forums

Popular Themes

Bold Photography Pro

Buy Now

Audioman Pro

Buy Now

Catch Fullscreen Pro

Buy Now

Fotografie Pro

Buy Now

Rock Star Pro

Buy Now

Catch Responsive Pro

Buy Now
Hire a Customizer

Recent Topics

  • Featured Slider
  • Customizing Block
  • How can I remove “Startseite/Kontakt” from sides
  • Plug In support
  • Customize Header & Footer | Catch Wedding Free WordPress Theme
  • Menu
  • White Screen after updating to PHP 8.0
  • Is the latest version of AUDIOMAN Pro compatible with WordPress 6.1.1 ?
  • How to manage Drop-Down Menu not working on mobile devices?
  • Use of templates
  • setting the template as the main landing page
  • Can not save changes using theme editor
  • Using Classic Editor, and PageBuilder
  • Disable Icons Block?
  • Mobile version
  • Blakely Pro Instructions
  • Mobile View – Christmas Bell Pro
  • izabela Woocommerse not displaying
  • Align menu in header top
  • Featured post not showing up on homepage
  • How do I make the header smaller?
  • Possible error in the homepage image
  • Service on an extra page – not on Homepage/Frontpage
  • Theme options not working with The Events Calendar
  • Footer overlapping body content
  • Header Media title – replace with jpeg file
  • Header Media disabled but creating blank empty space
  • reverse order articles
  • Display photo in header of product page
  • Fatal error when updating to PHP 8

Popular Tags

background blog catch box catch everest category child theme Color comments css Excerpt featured content featured image featured slider font footer header header image Home Page homepage image images layout logo menu mobile navigation padding page portfolio post posts responsive search sidebar Simple Catch site title slider theme title update widget widgets width woocommerce wordpress

Featured Posts

  • Best Free WordPress Block Themes for Full Site Editing for 2022
  • 40+ Best Free Business WordPress Themes for 2022
  • 30+ Best Free WordPress Themes for 2022
  • 25+ Best Free Music WordPress Themes for 2022
  • Our Top 10+ Free and Premium Photography WordPress Themes Collection 2022
  • Our Free and Premium Music WordPress Themes Collection

Donate Now

Click on the Donate button below to Support Free Themes, Free Plugins, and Free Support. All donations are used for the development and improvement of free themes, plugins, and support. Thanks for your contribution.
  • Home
  • About Us
  • Contact Us
  • Join Our Team
  • Terms & Conditions
  • Privacy Policy
  • Facebook
  • Twitter
  • Linkedin
  • Scroll Up
  • Pinterest
  • Youtube
  • Instagram
© 2012 - 2023 Catch Themes: Premium WordPress Themes. All rights reserved.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Cookie settingsGot it!
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT