Can I have a header like mailchimp?

Support
#1

I have X (not pro) and would like a header on my site that is similar to mailchimps.

The features I love are: transparent header with box on the far right, on hover it changes colour, on hover a big menu opens up on the drop down areas, when you scroll down everything but the icon disappears.

Is that possible with x?

#2

Hello Richard,

Thanks for writing in! If you are referring to the background color change, this maybe possible in X by using a custom css. You may add this code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar.x-navbar-fixed-top {
    background-color: transparent !important;
    transition: background 0.5s ease;
}

.x-navbar.x-navbar-fixed-top:hover {
    background-color: #fff !important;
}

For the menu, you will have to set up mega menu or use ubermenu plugin.

Hope this helps.

#3

Thanks for your reply but it isn’t quite what I was after.

I would like the header to start off with a transparent background and as the visitor scrolls down the page all the navigation elements vanish and only the site logo remains on the left of the header.

When the visitor scrolls up the full navigation appears in the header and has a white background.

Also, I would like to get rid of the coloured bar above the navigation elements when they are selected.

Thanks so much

#4

Hi,

To achieve that, you can add the code below in Theme Options > JS

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
		}

	});

});

Then add this in Theme Options > CSS

.x-navbar.x-navbar-fixed-top {
   background-color:transparent; 
   box-shadow:none;
   border:0;
}

.x-navbar.x-navbar-fixed-top ul.x-nav {
     display:none;
}

.x-navbar .desktop .x-nav>li>a:hover, 
.x-navbar .desktop .x-nav>.x-active>a, 
.x-navbar .desktop .x-nav>.current-menu-item>a {
   box-shadow:none;
}

Hope this helps

#5

Thanks so much for that. It is a definite improvement but not quite there.

I would like the header to be transparent to start with and show navigation menu. As I scroll I want the header to remain transparentwith just the logo on the left.

As you scroll back up the page the header navigation reappears with a solid white background.

As the page gets to the top of the page the header background returns to transparent but with logo and nav menu.

Sorry if I wasn’t as clear before.

I really appreciate your help in making my site look awesome!

#6

Hi there,

Please note that this falls beyond the scope of our as this involves further customization. But we can provide you some codes to get your started. Please provide the URL of the site in question so that we could check it.

Thank you.

#7

The site is in development and you will have to be logged in to be able to see how things are going. i will put the log in details below for you. I really do appreciate your help and I understand that there has to be a cut off point to your support somewhere or other :slight_smile:

#8

Hi Richard,

Please navigate to Theme Options > Integrity and turn On the Navbar Transparency option.

This will make your navbar transparent. Then add this to Theme Options > CSS

.masthead .x-navbar-inner {
	transition: background-color 0.5s;
}
.masthead .x-navbar-inner:hover {
	background-color: white;
}

This will make the Navbar background color solid on hover. Feel free to change the white color value.

And this one is to show the menu on hover.

.masthead .x-navbar-inner:hover ul.x-nav {
     display:block;
}

Further customization from here would be outside of the scope of support that we can offer, please contact a developer if you need to customize the header further. Or upgrade to PRO which has a header and footer builder.

X To Pro Conversion

Thanks,

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.