Customize Header/Navigation without plugins

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.

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;

}