Recreating a custom header

  • I am trying to get the custom header to fit right and have the entire header background be white not the grey you see on the side. I have tried to change the size but it still stops short of filling the entire header space.

    https://www.healingninjas.com

    Ideally, I would like this header area to look exactly like the one here:

    https://www.thebestbrainpossible.com/

    I also want to change the menu bar to the same color as the blue in the header.

    Cant figure out where to make these changes.

Viewing 9 replies - 1 through 9 (of 9 total)

  • Add thios custom CSS to your custom CSS file or via a plugin

    .site-header {
    background-size: 100% 100%!important;
}
.nav-primary {
    background: #344A98!important;
}

    Or by simply adding this code to functions.php file:

    add_action('wp_head', 'higherimpact_head');
function higherimpact_head() {
?>
<style type="text/css" media="all">
.site-header {
    background-size: 100% 100%!important;
}
.nav-primary {
    background: #344A98!important;
}
</style>
<?php
}
    Thread Starter HigherImpact

    (@higherimpact)

    That got rid of the grey space but it skewed the image. I have an image the size I want but when I try to upload a header, it makes me crop it at 960 x 200

    If you don’t want WordPress to crop an image then upload via ftp without using the media uploader..

    What’s the issue if WP crops the image anyway ?

    Thread Starter HigherImpact

    (@higherimpact)

    Forgive me, I`m a novice at this editing code stuff. Could you possibly help me understand what code or what edits I need to make or add to have the header area on this site https://www.healingninjas.com

    replicate this header area and menu ( upper and lower menus)

    https://www.thebestbrainpossible.com

    Specifically:

    1. make the main nav bar skinnier in width and height to match the other example site.
    2. add the top nav bar and include the social media buttons and search in it
    3. have

    *That made the header image fit the entire width as desired. You can use background-size: cover!important; probably it won’t skew the image..
    As for the other stuff you want to do, you will need to create a child theme and edit header.php file and make a lots of stuff that i can not explain on a tiny mobile i am using. Will check this tomorrow if not solved by then.

    Thread Starter HigherImpact

    (@higherimpact)

    Awesome thanks… Im watching how to create a child theme right now. Thanks for your help!

    Hi.

    I am afraid commercial themes aren’t really supported in these forums..

    Commercial Products[edit]
    If you use a commercial theme or plugin and need support, please go to their official support channel. In order to be good stewards of the WordPress community, and encourage innovation and progress, we feel it’s important to direct people to those official locations. Doing this will provide the developer with the income they need to make WordPress awesome.

    Forum volunteers are also not given access to commercial products, so they would not know why your commercial theme or plugin is not working properly. This is one other reason why volunteers forward you to the commercial product’s vendors. The vendors are responsible for supporting their commercial product.
    Codex – https://codex.www.ads-software.com/Forum_Welcome#Commercial_Products

    Please contact your theme vendor to address this simple customization you would like to make.

    Thread Starter HigherImpact

    (@higherimpact)

    The theme I am using is a free theme? Im not sure what you are telling me.

    your site seems to be based on the genesis framework by studiopress which is a commercial theme and which should be supported by the developer directly.
    https://codex.www.ads-software.com/Forum_Welcome#Commercial_Products

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Recreating a custom header’ is closed to new replies.