Integrating the logo into the menu

Sure! Sorry it took so long; was traveling recently. Link in private data section.

Thanks!

P.S. Somehow the order on imgur may have gotten messed up. I ordered the captions as #1, #2, #3, #4 so you can figure out the order they should appear!

• This reply was modified 8 years, 1 month ago by dunawaychris. Reason: changed imgur link

Thanks so much! The first bit of code worked perfectly!

Unfortunately the second didn’t work. Currently I do not display a conventional “logo,” as defined/set in Enfold settings. Instead, I have our logo set in the middle of the menu as a menu item.

As you can see when you visit the site (link in private content), the white cross logo looks great when it’s over the “glassy” semi-transparent menu, which only appears when the page is scrolled all the way at the top. When I scroll down, however, the menu changes from the “glassy, transparent” effect to a simple, light-cream background with blue text. I would like for this image to change, when the page is scrolled, from white to blue.

To set the logo in the middle of the menu, I created a menu item as a “custom link,” and in the Navigation Label I added the tag pointing to the white logo image. That’s what I want to change to blue when the user scrolls down. I’ve attached an image showing how the logo is currently set up in the menu in the private data (screenshot from “menus” page)

My best guess was some sort of class id in the tag, and some corresponding css to change the image or overlay a new one?

I hope that clarifies a bit. Thanks so much for all your help!

Chris

Thanks :) This gets closer. Unfortunately now the cross logo is about half the size it should be :) I tried changing the background-size attribute from “contain” to “cover,” which only displayed half the logo (see screenshots in private data). Also tried setting pixel values (background-size: 50px 50px) and percentages (background-size: 100% 100%). All results are in the screenshots.

I’m obviously no expert, but it seems that the “container” for the logo is too narrow. Any way to make it wider?

I tried different browsers (chrome and safari for mac); no difference.

Thanks for all your help!
Chris

Yes! That’s perfect! Thanks so much!

Just one or two more minor things:
1. Currently the cross logo is not quite centered. I think it’s because the entire menu (the whole block) is centered. Is there a way to center the cross, and then arrange the other menu items around it?

2. When I scroll down, the menu items get a little bit closer together (you can see this at the website, which is in the private data). I assume there’s a padding code somewhere that’s affecting this? How can I avoid this?
Here’s all the menu css code I have affecting the header, if it helps:

/* increases spacing between top menu items */
#top #header .av-main-nav > li {
	margin-right: 15px;
}

/* eliminates space above menu */
.container.av-logo-container {
	max-height: 0 !important;
}

#header_main {
	padding: 10px 0;
}

/* changes logo to blue in menu when scrolling down */
.header-scrolled-full #menu-item-914 a {
	background-image: url(https://middlestreetnh.com/wp-content/uploads/2016/09/CROSS-BLUE-50-50.png);
	background-size: 50px 50px;
	background-repeat: no-repeat;
	width: 50px;
}

.header-scrolled-full #menu-item-914 .avia-menu-text {
	display: none;
}

.header-scrolled-full #menu-item-914 a:hover {
	background: transparent !important;
	background-image: url(https://middlestreetnh.com/wp-content/uploads/2016/09/CROSS-BLUE-50-50-75.png) !important;
}

Thanks so much for all your help!

Thanks so much! Everything works perfectly now. I really appreciate all your help.

Chris