'Base header' layout and My Account link in header compatibility

Hello all,

I used to use the E-commerce header but when I added the Wholesalers page to the menu I got this ugly header instead….
https://s13.postimg.org/uh0qi1zvr/Screen_Shot_2016_09_09_at_15_32_10.png

Then I decided to change to the ‘Base header’ header which solved the issue with the margin becoming bigger BUT NOW I CANNOT SEE THE LOGIN/REGISTER MESSAGE THAT THERE USED TO BE IN THE HEADER….
https://s13.postimg.org/k14a3kxtz/Screen_Shot_2016_09_09_at_15_33_21.png

EVEN when I have set up On in ‘Login page tabs’ and ‘My account link in header’ from the Theme Settings > Shop > My account in WordPress.
https://s13.postimg.org/nnrjwuctz/Screen_Shot_2016_09_09_at_15_33_02.png

In which way do I need to set up my website so that I don’t get an ugly header AND I allow my guests to register? At the moment, even though I have set up On in these two places I can’t see a place in my website where the register option appears… When I click My Account on the top bar I go to a screen where I can only Log in but it doesn’t ask me whether I WANT TO CREATE A NEW ACCOUNT…

Hello,

Thank you for your questions.

Here is a solution to your header problem:

1. The best option is to use “Simplified header” layout.

2. By default this layout doesn’t include login/register link. To enable them you will need to add the following code snippet to the functions.php file in your child theme

add_filter( 'basel_header_configuration', 'basel_custom_header_configuration', 1, 1 );
function basel_custom_header_configuration() {

	return array(
			'container' => array(
				'wrapp-header' => array(
					'logo',
					'main_nav',
					'right-column' => array(
						'header_links',
						'search',
						'wishlist',
						'cart',
						'mobile_icon',
					)
				)	
			),
	);
}

3. If links will not fit the space well you can increase “right column width” option in Theme Settings -> Header -> Header layout.

In addition to this if you don’t see registration form on your account page you need to turn it on in WooCommerce -> Settings -> Accounts.

Regards

Ok, that works, thanks!!

Actually while resizing I realized that if I made the screen smaller the menu would split in two different lines so I had to decrease the right column width so much that the icons now appear all crammed with no much separation between them:

https://s9.postimg.org/mfqndxkz3/Screen_Shot_2016_09_12_at_15_58_26.png

Is there a possibility to widen the space between the icons? (or an alternative solution?)

Try to fix it by placing the following custom CSS code. And set your right column width to be 220 px

.main-nav .menu>li>a {
  padding-left:10px;
  padding-right:10px;  
}
.main-nav .menu>li.menu-item-has-children>a:after {
    right:0;
}
.right-column>div {
    margin-left:5px;
}
.main-header .right-column {
    padding-left: 0;
}
@media (max-width: 1024px) {
    
  .main-header .main-nav {
    display:none;
  }
  
.right-column .mobile-nav-icon {
    display:inline-block;
  }
}

OH MY GOODNESS!!! This is the best solution you could have given me ever!!!

Thank you so so so much! YOU ROCK 🙂

Great, we are happy to help you 🙂

[Author]

Posts