Modifications To Overlay Navigation

Comments

• Air

  July 2017 Posts: 10,970

  Hello there Rino:-)
  
  That is lot of things for one topic, so we can get lost here together, but lets try.
  
  If you could send me link to your page, even by private message, I could help you with modifications much better(cause I could see current code and site behavior). Click on my nick, in top-right corner you will find option "Message".
  
  

  RinoTheBouncer said: One last thing, I tried adding a logo for the loading screen, but unfortunately, it doesn't seem to support retina

  Best option would be to change image size with CSS on High DPI screens like retina. I will prepare code, once you send me link.
  
  

  RinoTheBouncer said: n addition, I would kindly like to ask you for a small fix to the transparent bar that appears on top of the page upon scrolling down. The bar is fine with scrollable pages, but with pages that do not have something to scroll to, the bar appears and sticks unless I attempt to scroll up and down multiple times to make it go away.

  This is header, that have your logo and menu opener. I didn't find info what you would like to do with it on these pages that doesn't scroll. That bar should be there no matter what, however if you like to hide it completely on some sites, you can use option "Show header from Nth row", see screen shot:
  
  
  

  RinoTheBouncer said: The attached image should make my description much clearer, and as you see the "MY NAME IS RINOTHEBOUNCER" part, that's the font "Montserrat 700" and the size of the navigation links should be close

  Customizing ▸ Header settings ▸ Menu overlay - here you can set size of links. As to align them use this custom CSS:

  #menu-overlay nav {
      text-align: left;
  }

  To make smaller spaces between links use this:

  #menu-overlay ul a{
  	line-height: 1.2em;
  }

  Hope this will get you started and we will tweak it as we go :-)
  
  With kind regards.
  
  
  
  PS. I still owe you some improvements, however cause of server change in last months we had to stop any new work, but I still have these things in my TODO list and plan to add some in newest update.

  

  

  ss-2017-07-04_12-52-01.png

  696 x 447 - 16K
• RinoTheBouncer

  July 2017 edited July 2017 Posts: 18

  Hey!
  Thanks a lot for writing back so soon. I sent you a private message because the website still has a temporary URL. Don't worry about the delayed future updates, and best of luck with your work!
  
  I also wanna add that the loading screen which features my logo (in the middle) isn't responsible as from mobile, the image appears much larger than the space. So I hope we can update that too. As for the transparent bar which I uploaded a photo for, I don't want the logo to disappear, I just want the transparent background that appears when you scroll down not to get stuck when the pages do not have anything to scroll down to. Check my website and try scrolling down on the main page and you'll see how the transparent bar which is meant to appear only when you scroll down sticks even when it's a page that doesn't have anywhere to scroll down to.
  
  I added the code for the navigation and removed the old code that makes it horizontal, but I wish I can leave a little space between the border and the text, I just need to set the font to Montserrat, which isn't working as when I change the font weight from the menu overlay customization section, it doesn't let me save and it's fixed on 900, and when I change other parameters and then the weight to 700 and then save, it still doesn't show in the font's look itself.
  
  Regarding the future updates, I really hope we get to have that animation for the hamburger icon, even if it means I get the animation from elsewhere and you help me add it.
  
  Thanks a million!

  Post edited by RinoTheBouncer on July 2017
• Air

  July 2017 edited July 2017 Posts: 10,970

  Hi again:-)

  RinoTheBouncer said: I just want the transparent background that appears when you scroll down not to get stuck when the pages do not have anything to scroll down to

  I see what is happening. Cause of border layout, Visual Composer probably can't calculate proper height when setting "100% height row" is on. It is hard to tackle this issue.
  Try this custom CSS for your homepage:

  .page-id-8746.header-horizontal #header.default-sticky {
      position: fixed;
  }

  RinoTheBouncer said: I just need to set the font to Montserrat, which isn't working as when I change the font weight from the menu overlay customization section, it doesn't let me save and it's fixed on 900, and when I change other parameters and then the weight to 700 and then save, it still doesn't show in the font's look itself.

  I will have to fix setting of font-family for overlay menu. For now fix is below CSS.
  Try this custom CSS

  
  /* space off border */
  #menu-overlay {
      padding: 60px;
  }
  @media only screen and (max-width: 600px) {
      #menu-overlay {
          padding: 30px;
      }
  }
  
  /* Font family for overlay menu */
  #menu-overlay ul a {
      font-family: Montserrat, sans-serif;
  }
  

  RinoTheBouncer said: I also wanna add that the loading screen which features my logo (in the middle) isn't responsible as from mobile, the image appears much larger than the space. So I hope we can update that too.

  If you wish to keep size of current preloader image then add this custom CSS.

  /* for High DPI screens */
  only screen and (-o-min-device-pixel-ratio: 5/4),
  only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-resolution: 120dpi) {
      #preloader {
          background-size: 500px 281.5px;
      }
  }
  
  /* for screens smaller then preloader image */
  @media only screen and (max-width: 1000px) {
      #preloader {
          background-size: contain;
      }
  }
  
  
  /* for screens smaller then preloader image and that are High DPI */
  only screen and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) ,
  only screen and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px) ,
  only screen and (min-resolution: 120dpi) and (max-width: 1000px) {
      #preloader {
          background-size: 500px 281.5px;
      }
  }
  
  
  /* for screens smaller then preloader image(displayed on High DPI) and that are High DPI */
  only screen and (-o-min-device-pixel-ratio: 5/4) and (max-width: 500px) ,
  only screen and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 500px) ,
  only screen and (min-resolution: 120dpi) and (max-width: 500px) {
      #preloader {
          background-size: contain;
      }
  }
  
  

  Hope I answered all.
  
  With kind regards.

  Post edited by Air on July 2017
• RinoTheBouncer

  July 2017 Posts: 18

  Everything is absolutely perfect. Thank you very very much!
  Thanks for baring with me for all these customizations. I couldn't really find any better theme with any better service than this.
  
  I look forward till you make the navigation hamburger icon transform from X and back, soon. I hope.
  
  Best wishes,
  R
• Air

  July 2017 Posts: 10,970

  RinoTheBouncer said: I look forward till you make the navigation hamburger icon transform from X and back, soon. I hope.

  Soon, I need to do it in this month, it is one of my top priorities after all that time wasted on moving server:-)
  
  Thanks for all your kindness and coffee!
  
  With kind regards.
• RinoTheBouncer

  July 2017 Posts: 18

  You're most certainly welcome!
  
  That's really great to hear. For me, I basically wish that the hamburger icon would flip and become the X mark without having to hide behind the transparent black overlay cover, and if possible, maybe adding the affect where the screen instead of fading to black to show the menu, it could slide from the left, either all the way to the right or to half of the page, along with the navigation content when clicking the icon.
  
  Thanks a million!
• Air

  July 2017 Posts: 10,970

  About upcoming update:
  
  OK, so I have already added slide effect for overlay menu, and 3 others effects, so you will be able to choose from them after update(I will release it in around 10 days probably, cause I have still lot of fixes to do).
  
  Also current closing X for menu overlay is much nicer(thin, in color of menu items, without any shadow, and with 90 degree spin on hover)
  
  I have also added animated icons(from hamburger to X, or arrow) to mobile menu opener, hidden sidebar opener, and menu overlay opener.
  
  

  ---

  
  About issue with your request:
  
  However here is where things get complicated and I need to talk with you, so you will not be disappointed.
  
  Menu overlay by nature is full screen, so as you said, it covers menu overlay opener.
  I tried to do something fancy and simulate animation from below layer to layer above overlay. I tried for few hours but effect sucked, as animation couldn't be seen good while icon was moving across screen to final position, so it was pointless.
  
  You say to "slide overlay to half of the page" , so it wouldn't cover whole screen, and, in your case, it wouldn't cover animated hamburger(X). Yes I could add such option, but then you will face issue on small mobile screen cause there overlay should be again full screen, and again it would cover animated hamburger(X).
  
  Problem is, that generally overlay menu is just not suited for animated icon, as it covers everything.
  
  What solutions do I see:
  1. Instead of menu overlay, use hidden sidebar with menu widget. See it here http://rifetheme.com/fatmoon-montreal/ - click on "hamburger with +". This icon in new version can be switched to hamburger with animation to X. This sidebar has fixed width(just in case you wonder).
  2. I will add option for menu overlay to be half screen, but when screen space will get smaller it will have to switch to full screen again, and normal X will popup again.
  
  Hope I described everything pretty clear.
  Tell me what you think :-)
  
  With kind regards.
• RinoTheBouncer

  July 2017 Posts: 18

  Hello,
  
  Thanks a lot for the update and I apologize for the late reply. The thing is I've seen such features implemented similarly in other themes, yet none of them seemed to capture the beauty of your theme, and the only thing that's missing in FatMoon is these subtle but really beautiful changes, that's why I thought I'd communicate with you in order to find a way to implement them.
  
  If you're interested, I can share some examples privately with you.
• Air

  July 2017 Posts: 10,970

  Hello:-)
  
  Sure you can send me examples(Private message me anytime), but that doesn't change that thing I have explained in above post. We have ready theme used by hundreds of people in various configuration, and I can only work in those "theme frames", so modifications will not change drastically theme functionality.
  You use only small subset of theme options so it may seem to you totally fine to change something, but I have to think how it can affect others:-)
  
  Maybe not everything is clear to you in my previous post, and it we can talk again after I release theme update, and you will see what we got already.
  
  However then next update I plan on end of August, so you may have to wait for next iteration on overlay menu:-)
  
  With kind regards.