Move menu & cart in header. Child themes

Hi,

I’m not expert by any means but I tried this out and it seems to work.

To get the cart moved up:
for the .site-header-cart .cart-contents
add top:-150px

To get the Menu to the center-right as you indicted, simply use Menu 2 and turn off Menu 1 in your WP admin panel. That is the location it will move the links to.

To make changes to/set up child theme. Add a style.css and a function.php to your child theme folder

My function.php header is set up as:

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

and all the changes I made seems to be coming out fine.

blastblast is correct, that would be the easiest way to achieve this, the links will look a little different however.

Alternatively, just copy the layout styles for the secondary navigation / search bar and apply them to the primary navigation and cart button. That should line them up perfectly for you.

Thanks for getting back to me,

Re: Moving the cart option,
Ive copied these sections of code into the child themes CSS and Function.php and nothing has changed. Am i missing something?
style.css
.site-header-cart .cart-contents add top:-150px
function.php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

RE: moving/changing the menu
I have tried changing between primary and secondary menu position, but it means a default menu shows up in the primary position..

How do i remove the Primary position using a child theme?
I am happy to just style the secondary menu.

Ah yes, you’ll need to remove the primary navigation all together. Add this to your child themes functions.php:

add_action( 'init', 'jk_remove_storefront_primary_nav' );
function jk_remove_storefront_primary_nav() {
remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
}

Your CSS should be:

.site-header-cart .cart-contents {
top: -150px;
}

Cheers

Ok cool so I managed to get halfway to where I wanted. ??
https://www.grindskincare.com/wp-content/uploads/2015/03/screenshot1.png

The code to remove the primary menu worked great ??

But meant that i needed to tweak the Cart code (which isnt perfect atm if you hover over it)

.site-header-cart.menu .cart-contents {top: -15px;}
.site-header {padding-top:7px;height: 60px;}

Any suggestions on how to fix the alignment of the dropdown box on the hover, and remove the white space at the top of the site?

Hard to say where that whitespace is coming from without a URL to inspect. Sorry.

For the cart dropdown, try tweaking the top value for .site-header-cart .widget_shopping_cart.

Cool managed to tweak the Css to move the cart to the topline of the header ??
Thanks so much!

/** Moves Cart to top line in Header **/
.site-header-cart.menu .cart-contents {top: -15px;}
.site-header-cart.menu .widget_shopping_cart {top: 40px;}
.site-header {padding-top:7px;height: 60px;}

The white space is still confusing me though, its on my home page.
https://www.grindskincare.com

Cheers

make sure to check responsive compatibility of you edits. I think you should be styling in ems or percentages, I could be wrong though

woops, scratch that first response. div#topbar to 100% height might do it. whenever you move anything around you probably are gonna have to deal with empty spaces.

px is sometimes generated based percentage styles and i think monitor width. so be carefull just changin px.

Hey,

There’s an empty p in .menu-preheader-menu-container. Remove that and it will fix the whitespace at the top of the page ??