-
AuthorPosts
-
August 23, 2016 at 2:44 pm #676436
Hello,
First, let me say that I love Enfold, and your support team has been awesome so far! Thank you for everything you do.
I’m looking to make some changes to my site. I’d like for the logo to be a part of the menu, which I partially figured out. I would like for it to look like this:
MENU 1 | MENU 2 | MENU 3 | LOGO | MENU 4 | MENU 5 | MENU 6I have a few questions, though:
1. In order to center the entire menu I set my header settings to “Logo center, menu below.” It seems there is still space for a logo, though, above the menu. Is there a way to remove this extra space, so there’s just a menu and no “placeholder” for the logo? I tried selecting “custom header size,” but it only goes down to 45px. 1px would be ok; 0 would be even better :)
2. This may be nit-picky, but instead of the whole menu being centered, I would love for the logo to be centered, and for the menu items to be evenly space around the logo. Any way to set just the logo (which is technically the center menu item) in the center, and have the other menu items positioned based on the logo?
3. I set the header to be glassy at the top, and to change colors when you scroll down. This works great for the text in the menu; there’s a glassy background with white text when the page loads, and when you scroll down it changes to a cream background with blue text. Is there any way to get the same effect with the logo? I’d love to have the logo be white w/ transparent background at the top (this is how it looks currently), but when the logo changes color, I’d love for the logo to change from white to blue.
4. Finally, because the logo is a menu item between “Events” and “Sermons,” the logo appears halfway down the mobile menu too. Any way to set a custom mobile menu without the logo?Thanks so much for all your help!
Chris
August 26, 2016 at 12:52 pm #678094Hey dunawaychris,
Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Best regards,
AndySeptember 14, 2016 at 3:12 am #686117Sure! 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
September 17, 2016 at 6:33 pm #687969Hi,
To remove the extra space please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.container.av-logo-container { max-height:0px!important; } #header_main { padding:10px 0; }
To change the logo to blue color when scrolled create a blue logo image and add the correct path to it in the below code.
.header-scrolled .logo img { opacity: 0; } .header-scrolled .logo a { background-image: url(blue-logo.png); background-size: contain; background-repeat: no-repeat; }
Best regards,
VinaySeptember 17, 2016 at 7:41 pm #687995Thanks 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
September 18, 2016 at 7:19 am #688049Hi,
Please remove the 2nd block of the code and use the below code. Replace the logo image path later.
.header-scrolled-full #menu-item-914 a { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/BSicon_ANCHOR.svg/50px-BSicon_ANCHOR.svg.png); background-size: contain; background-repeat: no-repeat; } .header-scrolled-full #menu-item-914 .avia-menu-text { display: none; } .header-scrolled-full #menu-item-914 a:hover{ background:transparent!important; }
Best regards,
VinaySeptember 19, 2016 at 12:42 am #688224Thanks :) 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!
ChrisSeptember 19, 2016 at 7:45 am #688329Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.header-scrolled-full #menu-item-914 a { width:50px; }
Best regards,
VinaySeptember 19, 2016 at 3:47 pm #688555Yes! 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!
September 20, 2016 at 12:51 pm #689130Hi,
Please add the below code and adjust the width value to match the menu items when the header is not scrolled.
.header-scrolled-full #menu-item-914 a { background-position: 50% 50%; width: 93px; }
Best regards,
VinaySeptember 20, 2016 at 2:37 pm #689253Thanks so much! Everything works perfectly now. I really appreciate all your help.
Chris
-
AuthorPosts
- The topic ‘Integrating the logo into the menu’ is closed to new replies.