Support » Theme: Storefront » URGENT PLEASE – trying to move Site logo above header, move nav below header

Viewing 5 replies - 1 through 5 (of 5 total)
  • Perhaps a start:

    
    .site-header {
        padding-top: 0;
    }
    
    .site-header {
        background-position: center 50px;
        background-repeat: no-repeat;
    }
    • This reply was modified 2 years, 10 months ago by  Leah.

    @saltlick: WooCommerce’s Storefront PowerPack does indeed empower you to move Site logo above header, move nav below header.

    Watch: https://youtu.be/YgJA3MUe5no

    • This reply was modified 2 years, 10 months ago by  Brad Griffin.

    Thanks for your reply Leah, unfortunately it’s nothing to do with CSS and the issue is now resolved.

    • This reply was modified 2 years, 10 months ago by  saltlick. Reason: sperring

    @PatronisingArseHat: Thank you very much to going to all the effort of creating a youtube video just to patronise me, I’m flattered. I especially liked the way that your cute little Merkin voice sounds while you condescend to my level and empower me. No really, thank you…

    As someone new to wordpress, but not at all new to writing code and working with many other CMS’s, I was after some advice that would get around the issue of the storefront template making things extremely complicated for people who are comfortable working with code.

    The standard answers seem to be either: “get a plugin” or “create a child theme” but that doesn’t solve the problem of the parent theme/template loading WP elements in the wrong place for my purposes.

    I assumed (wrongly I think) that this was a common problem, but clearly you wordpress fans either just live with it, or find another template that someone else has made?

    So, the solution is to go against everything that you wordpress regulars say – “don’t edit the parent theme”, “just hide everything you don’t want with CSS” & “create a child theme” etc. So to get the logo image OUTSIDE of the header <DIV> tag, it needs to be cut out and put somewhere else – Guess what Brad? PowerPack doesn’t do that. It only moves that stuff around INSIDE the header div tag, which is great if that’s what you want from an ametuer tool that requires no understanding of the background code.

    After I posted my question, I played with the powerpack toy for another hour or two in the header and after I’d rearranged the order of all the stuff (still) inside the header, wrecked my menu layout and was ’empowered’ to achive nothing, I reset all of that crap and played with the code inside the “storefront-template-hooks.php” file:

    /**
     * Header
     *
     * @see  storefront_skip_links()
     * @see  storefront_secondary_navigation()
     * @see  storefront_site_branding()
     * @see  storefront_primary_navigation()*/
    
    add_action( 'storefront_header', 'storefront_skip_links',                       0 );
    add_action( 'storefront_header', 'storefront_site_branding',                    20 ); /*Don't call this crap in the final template -> */
    
    add_action( '<strong>storefront_header2</strong>', 'storefront_site_branding',                    20 ); /* use THIS (header2) instead */
    
    add_action( 'storefront_header', 'storefront_secondary_navigation',             30 );
    add_action( 'storefront_header', 'storefront_primary_navigation_wrapper',       42 );/*Ignore*/
    add_action( 'storefront_header', 'storefront_primary_navigation',               50 );/*Ignore*/
    add_action( 'storefront_header', 'storefront_primary_navigation_wrapper_close', 68 );/*Ignore*/
    
    add_action( '<strong>storefront_header3</strong>', 'storefront_primary_navigation_wrapper',       42 );/*Use this*/
    add_action( '<strong>storefront_header3</strong>', 'storefront_primary_navigation',               50 );/*Use this*/
    add_action( '<strong>storefront_header3</strong>', 'storefront_primary_navigation_wrapper_close', 68 );/*Use this*/
    

    OK, so now the child theme can get call “storefront_header”, “storefront_header2” or “storefront_header3” separately, and they can be moved around independantly of each other the in child theme Theme Header (header.php) file.

    So my (CHILD) header.php now has three header sections, each containing (in order of appearance):

    1: Site logo and my own social icons stuff
    2: Site Banner image/s – clear of EVERYTHING and no other element over them
    3: Site primary navigation

    I also used the lilea media Child theme Configuarator, but found this to be quite flakey when I was in and out of editing the code directly, and it’s a good job I had a complete copy of all the working code for my template in Kommodo, as every now and again CTC would just revert my template to an old version, destrying my changes in the process!
    Lilea Child theme configurator has its uses but don’t rely on it 100% – make sure you have a working backup at every step of you work with the template.

    And what is it with everyone saying to just set the undisred elements of your templates to “Display:none;” in the CSS? In what world does that constitute good practice and clean, efficient code? If you don’t want something showing up on your site, just remove it so that the webserver doesn’t have to process it (and the extra bit of CSS to now hide it) and maybe the wordpress script will run a bit faster…

    Anyway, rant over…
    And brad, please feel free to record and post another youtube video – I do love being mocked by inhabitants from the colonies in their funny merkin accents, there’s nothing more entertaining…

    @saltlick Thanks for sharing your solution.

    I agree, the display: none is a very poor way to remove an element.

    The one issue that I have with Storefront is that the responsiveness is only defined by 2 media query break points.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘URGENT PLEASE – trying to move Site logo above header, move nav below header’ is closed to new replies.