Move Menu in Header

Hey,

You’ll need to unhook the storefront_primary_navigation from storefront_header as you’ve done for the search. Then rehook it in at the appropriate priority. From there you just need to style it accordingly.

I recommend reading up on WordPress hooks and actions.

FWIW, the above PHP will unhook the search box from Bookshop, but will need to be accompanied by the following CSS:

@media (min-width: 768px) {
  .site-header {
    	padding-top: 0em;
    	padding-bottom: 0;
	}
 .storefront-primary-navigation{
	clear: none;
	float:right;
	max-width: 300px;
	}
 .site-header .custom-logo-link{
	margin-bottom: 0;
	}
}

Add the PHP to your functions.php file, and the CSS to style.css – both of which are available through the Plugins Editor after you have installed the Themes Customisations plugin. This essentially adds a Child theme to the Storefront child theme (in my case, it’s Bookshop) you may have installed.

@netniks
Tried what you posted. It did not work. Completely shifted the site? Anything I might be missing?

Hi dwood360,
I am not qualified to say what could be causing your content to shift, but I’m including everything in my functions.php and style.css files here.

Please note that I am using the Bookshop theme, and my site is framella.com

functions.php

<?php
/**
 * Functions.php
 *
 * @package  Theme_Customisations
 * @author   WooThemes
 * @since    1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * functions.php
 * Add PHP snippets here
 */

 add_action( 'init', 'jk_remove_storefront_header_search' );
 function jk_remove_storefront_header_search() {
   remove_action( 'storefront_header', 'storefront_product_search', 	40 );
 }

style.css

/**
 * Add any custom CSS here.
 *
 * This file will be loaded after all other theme stylesheets.
 */
#masthead {
    padding-top: 0;
    padding-bottom: 0;
}
#menu-item-131 a {
    padding: 8px 2px 8px 0;
}
.site-header {
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: inset 0 -3px 3em rgba(0,0,0,0), 0 1px 1px rgba(0,0,0,0);
}
.site-header:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url("assets/images/header-bar.png");
    height: 0;
}
@media (min-width: 768px) {
  .site-header {
    	padding-top: 0em;
    	padding-bottom: 0;
	}
 .storefront-primary-navigation{
	clear: none;
	float:right;
	max-width: 300px;
	}
 .site-header .custom-logo-link{
	margin-bottom: 0;
	}
}
#menu-pre-menu {
    float: right;
}
.secondary-navigation {
    margin-bottom: .62em !important;
}
body {
    background-color: #ffffff;
}
.post-2 {
    margin-bottom: 0;
}
.column-full-width {
    margin-left: -999em;
    padding-left: 999em;
    margin-right: -999em;
    padding-right: 999em;
    background-color: #f8f8f8;
}