Support » Theme: Storefront » Customize Header/Navigation without plugins

  • Resolved d3venthusiastic

    (@d3venthusiastic)


    Hello,

    Despite extended research in this forum as well as on search engines queries, I have not been able to find an answer to my particular need.
    I want to customize the layout of the Storefront Header/Navigation section without using any plugin (eg.: Powerpack, Header plugin…) In several posts here and elsewhere rapidly plugins are advise, without given further information on how one will have to proceed if wanted to do it manually.
    This is the current layout of the header:
    https://imgur.com/0RvlWiU

    This is the desired layout:
    https://imgur.com/c7hk35o

    What I have found so far (this post ):
    1. Unhook all the current things (storefront/inc/storefront-template-hooks.php ).
    2. Re-hook what you need.
    3. Style them all using CSS.

    I don’t know how to merge both col.full blocks that don’t allow me to put on the same line the logo and the other objects of the header.

    I don’t have a URL to share because I’m doing this on local.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Well I think you will need to know some CSS code to manually do it without plugins.

    There might be some free CSS plugins for wordpress if you look around that will automatically change the way that stuff looks.

    I know storefront powerpack can do the job of moving your menu links to the right of your logo. But not aware of any other way to do it.

    Hi @d3venthusiastic,

    As you’ve noted to get this level of control over the layout it doesn’t exist in plugin form. For your desired layout you might be able to do it with CSS only. Depends on the exact markup of the header.

    If it makes the CSS styling easier, you could create a child theme and code your own header. I do like your approach though of unhooking and re-arranging the markup to make the CSS easier to write.

    Here is an image I tried to note up, I will try explain what I think I would do to tweak the HTML markup to make your desired layout easier.

    Storefront Header Actions
    Link to image: https://cld.wthms.co/gZlk4M

    To start we want everything to happen after storefront_header_container then before storefront_header_container_close, I would also think it helpful to remove the storefront_primary_navigation_wrapper & storefront_primary_navigation_wrapper_close as we’re going to move or fire the two actions there, the storefront_primary_navigation & storefront_header_cart before the storefront_primary_navigation_wrapper_close action.

    I think then the storefront_primary_navigation & storefront_header_cart actions should have a priority of 21 and 22 so they happen after the site branding and before the secondary navigation.

    That should hopefully give you decent HTML markup to then write some custom CSS for and style just the way you’d shared you wanted.

    Hi @ryanr14

    Thanks for your input, I managed to get the desired outcome, more or less doing what you explained. Here’s the result: https://imgur.com/2Bar6aO

    So for anyone trying to accomplish this I figured I’ll share both functions.php and style.css codes for these. Take note that this changes are made on the Child Themes’ files and not on the Parent Theme.

    functions.php

    add_action('init','delay_remove');
    function delay_remove(){
    	remove_action('woocommerce_after_shop_loop','woocommerce_catalog_ordering', 10);
    	remove_action('woocommerce_before_shop_loop','woocommerce_catalog_ordering', 10);
    	remove_action( 'storefront_header', 'storefront_secondary_navigation', 30 );
    	remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
    	add_action( 'storefront_header', 'storefront_primary_navigation', 30 );
    		if ( function_exists( 'storefront_header_cart' ) ) {
    			remove_action( 'storefront_header', 'storefront_header_cart', 60 );
    			if ( function_exists( 'Storefront_WooCommerce_Customiser' ) ) {
    				$header_cart = get_theme_mod( 'swc_header_cart' );
    				if ( false == $header_cart ) {
    					// don't add back the cart
    				} else {
    					add_action( 'storefront_header', 'storefront_header_cart', 35 );
    				}
    				} else {
    					add_action( 'storefront_header', 'storefront_header_cart', 35 );
    					}
    				}

    style.css

    /* This allows to properly display the header items on a single line, but only if the proper actions are implemented on the functions file of the child theme */ 
    @media (min-width: 768px) {
    	#masthead .col-full {
    		display: flex;
    		align-items: center;
    		height: 60px;
    	}
    	#masthead .main-navigation {
    		text-align: right;
        		text-transform: uppercase;
    		font-size: 11px;
    		font-weight: 700;
    		/*letter-spacing: 2px;
    		word-wrap: break-word;*/
    		height: 50px;
    		margin-left: -2em;
    		/*width: 47%;*/
    	}
    	.woocommerce-active .site-header div.site-branding {
    		width: auto;
    	}
    }
    
    /* Masthead */
    #masthead.site-header {
    	height: 60px;
    	margin-bottom:50px;
    	padding-top:0px;
    	border-bottom:none;
    }
    
    /* Header area */
    .site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
    margin-bottom: -25px;
    }
    
    /* This makes the header transparent so that the background image shows through*/ 
    .site-header {
    	background-color:transparent;
    }
    
    /* This limits the widht of the logo image */
    .site-header .site-branding img {
        height: auto;
        max-width: 190px;
        max-height: none;
    }
    
    /* This determines the main navigation menu looks, here used to determine the space between the top of the page and the menu items, margin-top as well as the margin of the mobile menu*/
    .main-navigation ul.menu, .main-navigation ul.nav-menu {
        max-height: none;
        overflow: visible;
        margin-top: 5px;
        margin-left: 0.1em;
        -webkit-transition: none;
        transition: none;
    }
    
    /* This sets the color of background menu categories and marging for handheld devices */
    .handheld-navigation ul.menu li {
    	background-color: #000c5b;
      	border-bottom: 1px solid white;
    	margin-top: 1px;
    }
    
    /* This sets the color of background menu categories and marging for handheld devices on hover mode*/
    .handheld-navigation  ul.menu li:hover {
    	background-color: #000c7c ;
    }
    
    /* This allows to control the space between the search box and the items surrounding it */ 
    .woocommerce-active .site-header .site-search {
        width: 21.7391304348%;
        float: right;
        margin-top: 20px;
        margin-left: 20px;
        clear: none;
    }
    
    /* This allows to control the space between the cart and its surroundings */ 
    .woocommerce-active .site-header .site-header-cart {
        width: 21.7391304348%;
        float: right;
        margin-top: 10px;
        margin-right: 0;
        margin-bottom: 0;
        font-size: 12px;
    
    }
    
Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.