Header 2 customization

[costin]

Hi,

I would like to use header 2 like here http://dante.swiftideas.net/shortcodes/buttons-social-icons/?header=header-2.

Could you please tell me if and how I can achieve the following:

1) Top right where Login, English and Personal Shopper are I would like to put something else, like a menu with 3 links.

2) Under the logo you have the actual menu where Home, Features… Just this part I would like to make it another color. How can I achieve this please?

Thank you!

[Swift Ideas – Ed]

Hi Costin,

If you check /includes/sf-header.php lines 162-174, you’ll find the code for header-2:

} else if ($header_layout == "header-2") {
			
			$header_output .= '<header id="header" class="clearfix">'. "\n";
			$header_output .= '<div class="container">'. "\n";
			$header_output .= '<div class="row">'. "\n";
			$header_output .= sf_logo('col-sm-4 logo-left');
			$header_output .= '<div class="header-right col-sm-8">'.sf_aux_links('header-menu', FALSE, "header-1").'</div>'. "\n";
			$header_output .= '</div> <!-- CLOSE .row -->'. "\n";
			$header_output .= '</div> <!-- CLOSE .container -->'. "\n";
			$header_output .= '</header>'. "\n";
			$header_output .= '<div id="main-nav" class="sticky-header">'. "\n";
			$header_output .= sf_main_menu('main-navigation', 'full');
			$header_output .= '</div>'. "\n";

We’re considering extending the header options in a later update, but don’t have any plans as of yet.

– Ed

[costin]

This reply has been marked as private.

[Swift Ideas – Ed]

Apologies, I missed the simplicity of #2. You can set the menu bar colour in the customiser, or use this custom css:

#main-nav {
background: #ff9900;
}

As for #1, check within the sf_aux_links() function, that is where the links are added.

– Ed

[costin]

Hi Ed,

1) Instead of having to modify the theme and do these changes everytime the theme gets updated could you please create a widget area for his space in header 2 type?

2) Many thanks, the code did exactly what I wanted. But could you please tell me what code to use for the same area when in the sticky mode?
Where in the color customizer can I do the same think as I haven’t found did?

Thank you!

[Swift Ideas – Ed]

1) We’ll consider options for this.

2) You can add this custom css:

#header-section .is-sticky #main-nav.sticky-header {
background: #ff9900;
}

Currently it uses the header bg colour, so would need specific custom css to just set the menu to be a different colour.

– Ed

[costin]

Number 2 fixed, many thanks!

As for 1, any ETA please? If it won’t be very soon could you please give me more details on how to insert the links in that header area?
I’ve checked the sf_aux_links() function but don’t know how to actually do it.

Thank you!

[Swift Ideas – Ed]

It won’t be that soon.

within that function you’ll find code such as:

if ($show_sub) {
				$aux_links_output .= '<li class="parent"><a href="#">'. __("Subscribe", "swiftframework") .'</a>'. "\n";
				$aux_links_output .= '<ul class="sub-menu">'. "\n";
				$aux_links_output .= '<li><div id="header-subscribe" class="clearfix">'. "\n";
				$aux_links_output .= do_shortcode($sub_code) . "\n";
				$aux_links_output .= '</div></li>'. "\n";
				$aux_links_output .= '</ul>'. "\n";
				$aux_links_output .= '</li>'. "\n";
			}

For a custom item, add something like so below or above one of the existing items:

$aux_links_output .= '<li class="parent"><a href="#">'. __("Menu Item Name", "swiftframework") .'</a>'. "\n";
$aux_links_output .= '<ul class="sub-menu">'. "\n";
$aux_links_output .= '<li><div id="custom-menu-content" class="clearfix">'. "\n";
$aux_links_output .= 'Menu Item Content Code Here' . "\n";
$aux_links_output .= '</div></li>'. "\n";
$aux_links_output .= '</ul>'. "\n";
$aux_links_output .= '</li>'. "\n";

– Ed

[costin]

This reply has been marked as private.

[Swift Ideas – Ed]

You won’t need most of that code then, just his for each link:

$aux_links_output .= '<li><a href="http://allojardinier.lu/contrat-entretien-jardin-luxembourg/">'. __("Contrat d'entretien jardin", "swiftframework") .'</a></li>'. "\n";

There is an option in the theme options to disable search.

To align the menu to the logo:

div.header-right {
margin-top: 15px;
}

– Ed

[costin]

Thank you, how to solve 3) Take out the search icon at the end (is there an option in Theme options for that?)

I’ve seen in theme options Logo top spacing and Logo bottom spacing. Are these option to reduce the white space above and below logo? Because in my case are not working. Should I use a custom code instead?

thank you!

[Swift Ideas – Ed]

Theme Options > Header Options > Header Search – Search disabled.

They are to add extra spacing. Doesn’t look like you have much space to reduce in the header?

– Ed

[costin]

Search is ALREADY DISABLED but the magnifier is still there as you can notice!

Still, if I want to reduce those spaces below and above logo, how can I do it please?

Thank you!

[Swift Ideas – Ed]

Thanks the Super Search Link. Theme Options > Super Search, disable it there.

For the spacing:

#header-section #header {
padding: 15px 0;
}

– Ed

[costin]

Awesome support!