Centre logo image in menu

Support
#1

Hi there

Thanks for the continued support it’s great! I’ve just replaced the text logo in the header menu with an image and i’ve got a few problems:

  • I can’t get the logo to be vertically aligned with the menu, i’ve tried with padding and gotten close
  • I have some javascript that alters the size of the menu on scroll and with the text logo I could use CSS to style the text with it, but am unsure about how it would work with an image instead.

I’ve used this code so far on the image to try and get it in line on the home page

.x-navbar .x-brand.img {
  margin-top: -55px;
}

The website url is https://dwanedigital.co.uk/ and here is another page where the menu scrolls down https://dwanedigital.co.uk/web-design/

#2

Hi,

Please remove white space around your logo image so it will align properly.

https://dwanedigital.co.uk/wp-content/uploads/2018/01/Dwane-Digital-Logo-Transparent-White.png

No need to add your code after that.

Thanks

#3

Hi Paul

I had to add

    .x-brand.img {
  
  margin-top: 10px;
}

to align it properly.

However what about my other problem?

On the scroll of the menu the background at the top is white so the logo cannot be seen. Can I replace the image shown via the new class that is added when the scroll position reaches a certain point?

This is the CSS that is added when the scroll position reaches a certain point

/* MENU SCROLL */

.x-navbar {
    transition: 0.5s all linear;
}

.x-navbar.alt-color {
    background-color: white !important; 
    height: 60px;
    border-bottom: 1px solid black !important;
    padding-top: 5px;
    padding-bottom: 10px;
  
}

.x-navbar.alt-color .ubermenu .ubermenu-target-text {
  color: #303030 !important;
}

.x-navbar.alt-color .x-brand.img {
  margin-top: 10px;
}

.x-navbar.alt-color #ubermenu-main-7-primary-2 {
	display: inline !important;
}

Thanks

#4

Hi There,

To change the logos on scroll, add the following Javascript code into your Theme Options > Global JS area.

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','path.to/your/secondary/logo.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','//dwanedigital.co.uk/wp-content/uploads/2018/01/Dwane-Digital-Logo-White.png');
   }
 });
});

Replace the the line path.to/your/secondary/logo.png with the path to your logo.

Thanks!

#5

Hi there

That works great in replacing the logos, however when I scroll back up to the top it doesn’t change back to the white one. I tried combining it with some of my existing JS code but haven’t been able to get it to work.

EDIT:

I think i’ve managed to get it to work. It seems to be working okay but would appreciate any feedback on the code used or any errors within it. Also my logo isn’t displaying inline with the menu anymore after implementing it?

jQuery(document).ready(function($) {
	$(window).scroll(function() {
		var scrollPos = $(window).scrollTop(),
		navbar = $('.x-navbar');

		if (jQuery('body').hasClass('home')) {
			if (scrollPos > 800) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','//dwanedigital.co.uk/wp-content/uploads/2018/01/Dwane-Digital-Logo-Black.png');     
			} else {
				$('.x-navbar .x-brand img').attr('src','//dwanedigital.co.uk/wp-content/uploads/2018/01/Dwane-Digital-Logo-White.png');
			}
		} else {
			if (scrollPos > 325) {
				 $('.x-navbar-fixed-top .x-brand img').attr('src','//dwanedigital.co.uk/wp-content/uploads/2018/01/Dwane-Digital-Logo-Black.png');
			} else {
				$('.x-navbar .x-brand img').attr('src','//dwanedigital.co.uk/wp-content/uploads/2018/01/Dwane-Digital-Logo-White.png');
			}
		}
	});
});
#6

Hi There,

Unfortunely this type of customization falls out of the scope of our support.

To achieve your goal I rec=commend you to use Pro instead of X.

You can upgrade your theme on your Apex License page.

Pro Header Builder will allow you to build this layout you are looking for code free.

Thanks for understading.

#7

I’ve already figured it out myself Joao. Just that my logo isn’t displaying inline with the menu.

#8

Hi there,

Would you please kindly elaborate what do you mean by not displaying inline? I checked your website and the logo and the menu sit pretty decent:

Thank you.

#9

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