Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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 6

    I 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

    #678094

    Hey 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,
    Andy

    #686117

    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
    #687969

    Hi,

    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,
    Vinay

    #687995

    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

    #688049

    Hi,

    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,
    Vinay

    #688224

    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

    #688329

    Hi,

    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,
    Vinay

    #688555

    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!

    #689130

    Hi,

    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,
    Vinay

    #689253

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

    Chris

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Integrating the logo into the menu’ is closed to new replies.