Customizations in menu overlay

RinoTheBouncer

I'm looking to get minor customization for FatMoon. How do I submit a request? Thank you.

Air

Welcome here finally:-)

You can post it here, as topics give us much more flexibility in working on such things. As explained previously, please describe what you need here. You can add screen shots if needed to explain your case.

If you need to keep something private, like link to your site, then you can send it by private message to me(click on my nick, in top-right corner you will find option "Message").

If you want to hide something on screen shot then just cut off sensible parts.

However on main case we will be working here, so please describe what you need:-)

With kind regards.

RinoTheBouncer

Thanks a lot for the kind welcome and instant response.
Here are screenshots of the customizations I want to make to the navigation.

I want the items to appear horizontally and without and effects. Perhaps just fade in or the whole black/transparent screen dropping from top to bottom like a curtain along with the items on them as shown here.

I also wanna know if it's possible to put the social network icons just as shown in the picture, on the border of the website, along with a copyright message. Something that shows up on all pages, in this minimalistic manner.

Hope to hear from you soon.
Thanks!

Air

It is interesting design - I like it:-)

Lets start from end:
I assume this is border from our theme. This border disappears on devices smaller then ~1300px so putting there social icons is rather not good idea. However maybe you could point them there from footer with some custom style for bigger devices(tricky). Same for copyright. So this is rather not too compatible with theme.
Anyway please add socials and copyright to footer on your site, send me link to it, and I will see what can be done.

As for menu items, please add this custom CSS:

#menu-overlay ul li {
    display: inline-block;
    margin-right: 10px;
}

End effect shouldn't be problem now, but please judge on your own :-) And tell me what do you think.

With kind regards.

RinoTheBouncer

Hello,
Thanks a lot for the code and for your help. I just tired it and here's the things. The menu does show up but the items look too large and too close to each other. If you'd like to have access to my WP-Admin and do it for me, I wouldn't mind that at all, and if you can teach me what to do, I'm also okay with that.

I prefer the effects to be either fade-in and fade-out for open and close or the curtain effects that I mentioned above. As for the borders, is it possible that we do something regarding the mobile version such as making the border remain on mobile defvices, or somehow disappear and we put them in an alternate location just for mobile devices, such as the menu itself?

I attached an image below. We can make it look like this both on desktop and mobile, but while on desktop, the icons show up on the border, otherwise, they'd appear on the menu alone when accessed from phone.

As for the copyrights line, if we choose to keep the border on mobile, we can put it on the border. Otherwise, we'll find another place for it.

Thanks a lot!

RinoTheBouncer

Oh, and I hope we can remove the blur/invert color effect from the X symbol that closes the menu and just keep it a white button that may spin or do that same effects that the navigation icon does on most sites? Thanks again!

RinoTheBouncer

Sorry for the numerous messages, try opening Apple.com from a mobile device and see how the menu item animates when it's clicked. If possible, I'd love to add that effect to the navigation menu and the X mark both on desktop and tablet/phones. Thanks a million!

Air

RinoTheBouncer said: The menu does show up but the items look too large and too close to each other.

As for too close, just change margin-right value in code I gave you.
As for size of items you have control over them in Customizing ▸ Header settings ▸ Menu overlay.

RinoTheBouncer said: Oh, and I hope we can remove the blur/invert color effect from the X symbol that closes the menu and just keep it a white button that may spin or do that same effects that the navigation icon does on most sites?

Sure, add this custom CSS

.close-menu,
.close-menu:hover{
    text-shadow: none;
    color: #fff;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.close-menu:hover{
    /* spin X on hover */
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

RinoTheBouncer said: As for the borders, is it possible that we do something regarding the mobile version such as making the border remain on mobile defvices, or somehow disappear and we put them in an alternate location just for mobile devices, such as the menu itself

Borders disappear on smaller screen to save precious space for other elements. If you wish to keep them on mobile, then this will require much more custom work and for this I advise to hire developer.

RinoTheBouncer said: I attached an image below.

You mean previous image or some new one, cause I only see your first image?

RinoTheBouncer said: I prefer the effects to be either fade-in and fade-out for open and close or the curtain effects that I mentioned above.

It is fade in and fade out to show/hide. If you mean effect on text(menu items) then you can remove it with this custom CSS:

#menu-overlay ul,
#menu-overlay.close ul{
	-webkit-transform: none;
			transform: none;
}

RinoTheBouncer said: We can make it look like this both on desktop and mobile, but while on desktop, the icons show up on the border, otherwise, they'd appear on the menu alone when accessed from phone.

Well, it is not so simple as move this here and there, show this when "that", spin and fade on my command ;-)

Many from what you propose is beyond simple changes, and requires some deeper work to achieve these effects. So as such things, they are getting beyond scope of theme support.
I can propose you simple workarounds(like I did in previous post) to achieve something as close as possible to what you need.

Like I said on ThemeForest: simple changes for one, can be end up as technical nightmares.

Maybe it would be good idea to get developer to do this work for you, then you can adjust theme code exactly as you imagine :-)

With kind regards.

RinoTheBouncer

Hey. Thanks a lot for your reply. This is the other image. As for the codes. Do I put them right after the one you gave me or before them or where exactly? I'm adding them to the Additional CSS in Customize section.

RinoTheBouncer

And what I meant by the navigation icon and X mark is similar to Apple.com and www.thecodex.netowrk on mobile, where the menu icon transforms to the X mark and back and the black/transparent background of the navigation menu falls behind the menu and X icon and comes down like a curtain.

Air

RinoTheBouncer said: And what I meant by the navigation icon and X mark is similar to Apple.com...

Sorry, this is beyond support power. I made for you spinning X - hope that is enough :-)

RinoTheBouncer said: I'm adding them to the Additional CSS in Customize section.

It is fine:-)

RinoTheBouncer said: As for the codes. Do I put them right after the one you gave me or before them or where exactly?

Each way will be fine in this case.

RinoTheBouncer said: We can make it look like this both on desktop and mobile, but while on desktop, the icons show up on the border, otherwise, they'd appear on the menu alone when accessed from phone.

As for screen shot and above quote: It will be rather hard to be sure that there is enough space for these social icons on mobiles, so this is unsafe modification - it may end up that socials icons will be displayed on menu items.

I advise to keep them in place there where designed in layout. There are few options, and if you wish to make them accessible all the time then add them to header and make header sticky: Customizing ▸ Header settings ▸ Type, variant, background ▸Sticky version ▸No hiding sticky

With kind regards.

RinoTheBouncer

Hello,
Thanks for your reply. Everything worked out just perfectly fine. Thanks to you.

As for the "hamburger" navigation icon, I found this online, that's why I asked if this code can ever be used, which is exactly what I'm trying to achieve: http://callmenick.com/post/animating-css-only-hamburger-menu-icons

Air

Hello again :-)

For now it can't cause it requires deeper modification from me, but I will think of adding such option in one of next updates. Then you will be able to switch it to this nice effect :-)

With kind regards.

RinoTheBouncer

That would be really great. I eagerly look forward to that. If I may add one more requisition (I hope I'm not asking too much, nor being annoying), but the navigation appears horizontal on mobile and desktop, can it be made horizontal on desktop and vertical on mobile? also, can I remove the underline effort on navigation links an replace it with a smooth decrease and increase in opacity/alpha of the text? Thank you!

Air

Sure:-)

RinoTheBouncer said: the navigation appears horizontal on mobile and desktop, can it be made horizontal on desktop and vertical on mobile?

For this, please change code that I gave you in this reply https://support.apollo13.eu/discussion/comment/19864/#Comment_19864 to such custom CSS:

@media only screen and (min-width: 601px) {
	#menu-overlay ul li {
		display:      inline-block;
		margin-right: 10px;
	}
}

RinoTheBouncer said: can I remove the underline effort on navigation links an replace it with a smooth decrease and increase in opacity/alpha of the text? Thank you!

Please use this custom CSS:

#menu-overlay ul a {
	opacity: 1;
	-webkit-transition: all .5s;
	transition: all .5s;
}
#menu-overlay ul a:hover {
	text-decoration: none;
	opacity: 0.5;
}

With kind regards.

RinoTheBouncer

Thank you very much for the outstanding help and for bearing with me

Air

Not a problem. Thanks for a coffee! :-)