In love with the FullScreen Inline with Dynamic Background that you see in the Resort Demo, however I really want the menu to be centered the way I currently have it on my site which is using the Full Screen Cover Slide and using a little scripting to create a divider line and submenu below. Is there anyway to accomplish both the center being centered (see screenshot below) but with the awesome background rollover effects like you see in the resort demo?
I had figured out how to get the background images to work and have added the background images to the menu item's off canvas image, however if I'm right the only way you can get this effect to work is by using the FullScreen Inline with Dynamic Background option and doing that puts the navigation all in a horizontal line (see below):
rather than the centered / returned orientation which I'm wanting to have (below):
So basically I am looking to have the functionality of the FullScreen Inline with Dynamic Background but with the centered / returned orientation (which you see above).
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 691px) {
#slide-out-widget-area .off-canvas-menu-container .menu, #slide-out-widget-area .off-canvas-menu-container .menu ul {
display: flex;
flex-direction: column !important;
}
}
Hopefully one last question on this, while I love the animation underline, I think I prefer the more subtle color change animation effect, but even I've this configured (per Andrew's guidance below) for whatever reason, I'm still just getting the animation effect:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#slide-out-widget-area .off-canvas-menu-container li a:hover span:after, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span:after {
transform: scaleX(0) !important;
}
#slide-out-widget-area .off-canvas-menu-container li a:hover span, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span {
opacity:0.7 !important
}
Awe...just when I thought I had this all perfect and configured all my background images, I'm noticing some weird animation glitches. As you may see the smaller nav items (assignments & about) oddly don't animate with the rest of the navigation. I imagine this might have something to do with the janky way I added the horizontal line and am changing the size and font of these nav items in the menu (although it did work fine when I had the Off Canvas Menu Style set to Full Screen Cover + Blur).
I'm also noticing when you collapse the menu the nav item of the page your on hangs for a minute which I don't see happening on the resort demo. Kinda weird....
I was going to also ask if there was an easy way to change the line spacing of the navigation. I see I can see where the padding is set in the flex item, but couldn't find the css to pull out.
Anyways, you guys have been so helpful. Let me know if there might be any quick fixes on these last items and hopefully I'll be all set!
Unfortunately, I can't replicate the animation issues in your off canvas menu. Could you share a recording of the same so we can try and replicate this?
As for the spacing, add this into the Custom CSS box in your Salient Theme Options panel:
#slide-out-widget-area .off-canvas-menu-container .menu li a,
.menuwrapper >.sub-menu.dl-animate-in-4 > li >a,
#slide-out-widget-area .menuwrapper >.sub-menu > li > a {
margin: 0 !important;
}
1. The nav now appears to be much lower on the page. Is there a quick line of code that would allow me to position the entire navigation up a bit higher on just the desktop resolution?
2. I was thinking the colors of the nav including the rollover / on state were defined by the extra color in the settings, but now see it's controlled by the custom script that Tahir provided:
#slide-out-widget-area .off-canvas-menu-container li a:hover span, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span { opacity:0.7 !important
}
I'm wondering if this could be reversed so rollovers and active link is at 100% and the rest of the menu is at the 0.7%...is this something I could change up easily within the settings or custom code?
As for the glitch....here is a video that shows it pretty well. You can see the bottom nav appears without any transition at 0:02 and how the active page link oddly hangs before disappearing at around 0:04. This appears to be happening in both Safari and Chrome.
I can't seem to replicate this from our end. In the meantime, you can try disabling the delay JS option in the Salient > General Options Performance and see if that helps.
Add this to the Custom CSS box in your Salient Theme Options panel:
1. Unfortunately that did not seem to help. Have tested on multiple devices and even called a few people who can also see it on both Safari and Chrome.
2. Thanks for the custom CSS. That worked but now everything is too high. Added a top value that seemed to do the trick:
....but unfortunately now it looks weird on mobile, and falls below the social icons. ugh. Anyways, let me know if there might be a better way to accomplish this including targeting screen size (@media)
3. Was just wondering if you had any recommendations for the below request to reverse the 0.7 value added in the script so the rollover and on states were at 100% opacity ( so it stands out better) while the rest of the nav was at 70%.
Thanks again for all your help on these last items!
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Sorry, I'm a bit confused. I removed the top value and added the code below, but now the menu is back lower (below center) and unfortunately this eliminated the rollover / on state.
3. Was just wondering if you had any recommendations for the below request to reverse the 0.7 value added in the script so the rollover and on states were at 100% opacity ( so it stands out better) while the rest of the nav was at 70%.
Could you elaborate a bit more to what you wish to change with CSS .
/* Change Inline to Verticle on Navigation */
/* Main Nav Spacing & Position */
@media only screen and (min-width: 691px) {
#slide-out-widget-area .off-canvas-menu-container .menu, #slide-out-widget-area .off-canvas-menu-container .menu ul {
display: flex;
flex-direction: column !important;
}
}
#slide-out-widget-area .off-canvas-menu-container li a:hover span:after, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span:after {
transform: scaleX(0) !important;
}
#slide-out-widget-area .off-canvas-menu-container li a:hover span, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span {
opacity:0.70 !important;
}
#slide-out-widget-area .off-canvas-menu-container .menu li a,
.menuwrapper >.sub-menu.dl-animate-in-4 > li >a,
#slide-out-widget-area .menuwrapper >.sub-menu > li > a {
margin: 0 !important;
}
#slide-out-widget-area.fullscreen-inline-images .inner-wrap > .inner {
margin: 0;
}
#slide-out-widget-area.fullscreen-inline-images .inner-wrap {
padding-top: 0px !important;
justify-content: center;
}
Thanks Tahir,
Sorry, it's possible between all the emails some things have gotten lost in translation on these last couple items I'm trying to fix. So above is what I currently have in my CSS for the inline menu and since you guys have been so generous with your assistance I'm going to try to be super clear with a summary of these last items I'm trying to fine tune:
1. Menu's vertical spacing: The menu looks perfect on mobile, but is appearing a little low on the desktop so all I was trying to do is move it up about 20% while not affecting the vertical spacing of the menu on mobile.
2. Rollovers: So right now, when you rollover a navigation item, it reduces the opacity to 0.70%...which is fine, but I was hoping that I could reverse the current rollover / on state of the menu's rollovers so that when the menu appears it's 70% opacity and when you rollover an item it would appear at 100% and after you've clicked into a page the link remains at 100% respectively so the user knows they are on that page.
3. Technical Glitches: It seems like for whatever reason I'm having these weird glitches now happening. Here is the description /video of what we are seeing across the board on all our devices:
You can see the bottom nav appears without any transition at 0:02 and how the active page link oddly hangs before disappearing at around 0:04. This appears to be happening in both Safari and Chrome.
Also, when you reload the page (and before moving interacting with the page) it looks like something is blocking the background image / video:
Anyways...let me know if there might be any quick fixes to these last items...and again, THANK YOU for all the help.
Hey guys...
In love with the FullScreen Inline with Dynamic Background that you see in the Resort Demo, however I really want the menu to be centered the way I currently have it on my site which is using the Full Screen Cover Slide and using a little scripting to create a divider line and submenu below. Is there anyway to accomplish both the center being centered (see screenshot below) but with the awesome background rollover effects like you see in the resort demo?
Hey Again,
Please provide the page URL so we can write up what's possible.
Best,
ThemeNectar Support Team
Hi Eric,
Thank you for getting back to us.
Please share your site URL so we can check out your current setup and advise.
We look forward to your reply.
Thanks,
Sorry, thought I had included it:
http://ericrussellphotography.com/staged/
Thanks guys.
Hi eric,
Thank you for getting back to us.
To achieve the image background, you need to add a background image to the menu items in the salient menu options https://themenectar.com/docs/salient/salient-menu-options/#:~:text=Accessing%20the-,Menu,-Options.
As for the underline, you need to adjust your header navigation animation effects to have an animated underline.
Try that and let us know how it goes.
Cheers,
Thanks Andrew...
I had figured out how to get the background images to work and have added the background images to the menu item's off canvas image, however if I'm right the only way you can get this effect to work is by using the FullScreen Inline with Dynamic Background option and doing that puts the navigation all in a horizontal line (see below):
rather than the centered / returned orientation which I'm wanting to have (below):
So basically I am looking to have the functionality of the FullScreen Inline with Dynamic Background but with the centered / returned orientation (which you see above).
Hopefully that makes sense.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 691px) { #slide-out-widget-area .off-canvas-menu-container .menu, #slide-out-widget-area .off-canvas-menu-container .menu ul { display: flex; flex-direction: column !important; } }Thanks
ThemeNectar Support Team
Incredible....that worked great!
Hopefully one last question on this, while I love the animation underline, I think I prefer the more subtle color change animation effect, but even I've this configured (per Andrew's guidance below) for whatever reason, I'm still just getting the animation effect:
Thanks for all the help!
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#slide-out-widget-area .off-canvas-menu-container li a:hover span:after, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span:after { transform: scaleX(0) !important; } #slide-out-widget-area .off-canvas-menu-container li a:hover span, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span { opacity:0.7 !important }Thanks
ThemeNectar Support Team
Works great...thank you Tahir!
Hi Eric,
Thank you for getting back to us.
I'm glad we could assist. Feel free to reach out if you have any other queries.
Regards,
Awe...just when I thought I had this all perfect and configured all my background images, I'm noticing some weird animation glitches. As you may see the smaller nav items (assignments & about) oddly don't animate with the rest of the navigation. I imagine this might have something to do with the janky way I added the horizontal line and am changing the size and font of these nav items in the menu (although it did work fine when I had the Off Canvas Menu Style set to Full Screen Cover + Blur).
I'm also noticing when you collapse the menu the nav item of the page your on hangs for a minute which I don't see happening on the resort demo. Kinda weird....
I was going to also ask if there was an easy way to change the line spacing of the navigation. I see I can see where the padding is set in the flex item, but couldn't find the css to pull out.
Anyways, you guys have been so helpful. Let me know if there might be any quick fixes on these last items and hopefully I'll be all set!
THANK YOU!
Hi Eric,
Thank you for getting back to us.
Unfortunately, I can't replicate the animation issues in your off canvas menu. Could you share a recording of the same so we can try and replicate this?
As for the spacing, add this into the Custom CSS box in your Salient Theme Options panel:
#slide-out-widget-area .off-canvas-menu-container .menu li a, .menuwrapper >.sub-menu.dl-animate-in-4 > li >a, #slide-out-widget-area .menuwrapper >.sub-menu > li > a { margin: 0 !important; }Try this and let us know how it goes.
Thanks,
Awesome...that worked great Andrew...thank you!
2 quick follow ups:
1. The nav now appears to be much lower on the page. Is there a quick line of code that would allow me to position the entire navigation up a bit higher on just the desktop resolution?
2. I was thinking the colors of the nav including the rollover / on state were defined by the extra color in the settings, but now see it's controlled by the custom script that Tahir provided:
#slide-out-widget-area .off-canvas-menu-container li a:hover span, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span { opacity:0.7 !important }I'm wondering if this could be reversed so rollovers and active link is at 100% and the rest of the menu is at the 0.7%...is this something I could change up easily within the settings or custom code?
As always, thanks for all the great help!
As for the glitch....here is a video that shows it pretty well. You can see the bottom nav appears without any transition at 0:02 and how the active page link oddly hangs before disappearing at around 0:04. This appears to be happening in both Safari and Chrome.
https://www.dropbox.com/scl/fi/oee2mrn2tjj6go4zq94y8/Nav-Glitch-720.mov?rlkey=lgnuw3q0gv7tr9e4aui22z157&dl=0
Hi Eric,
Thank you for getting back to us.
Add this to the Custom CSS box in your Salient Theme Options panel:
#slide-out-widget-area.fullscreen-inline-images .inner-wrap > .inner { margin: 0; }Try that and let us know how it goes.
Cheers,
Thanks Andrew!
1. Unfortunately that did not seem to help. Have tested on multiple devices and even called a few people who can also see it on both Safari and Chrome.
2. Thanks for the custom CSS. That worked but now everything is too high. Added a top value that seemed to do the trick:
#slide-out-widget-area.fullscreen-inline-images .inner-wrap > .inner { margin: 0; top: 200px; }....but unfortunately now it looks weird on mobile, and falls below the social icons. ugh. Anyways, let me know if there might be a better way to accomplish this including targeting screen size (@media)
3. Was just wondering if you had any recommendations for the below request to reverse the 0.7 value added in the script so the rollover and on states were at 100% opacity ( so it stands out better) while the rest of the nav was at 70%.
Thanks again for all your help on these last items!
Hey Again,
Remove the top value css and use below only.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#slide-out-widget-area.fullscreen-inline-images .inner-wrap { justify-content: center; } #slide-out-widget-area .off-canvas-menu-container li a:hover span, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span { opacity: 1 !important; }Thanks
ThemeNectar Support Team
Thanks Tahir,
Sorry, I'm a bit confused. I removed the top value and added the code below, but now the menu is back lower (below center) and unfortunately this eliminated the rollover / on state.
Hey Again,
Use the below revised CSS to not take into account the header padding:
#slide-out-widget-area.fullscreen-inline-images .inner-wrap { padding-top: 0px !important; justify-content: center; }3. Was just wondering if you had any recommendations for the below request to reverse the 0.7 value added in the script so the rollover and on states were at 100% opacity ( so it stands out better) while the rest of the nav was at 70%.
Could you elaborate a bit more to what you wish to change with CSS .
Best
ThemeNectar Support Team
/* Change Inline to Verticle on Navigation */ /* Main Nav Spacing & Position */ @media only screen and (min-width: 691px) { #slide-out-widget-area .off-canvas-menu-container .menu, #slide-out-widget-area .off-canvas-menu-container .menu ul { display: flex; flex-direction: column !important; } } #slide-out-widget-area .off-canvas-menu-container li a:hover span:after, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span:after { transform: scaleX(0) !important; } #slide-out-widget-area .off-canvas-menu-container li a:hover span, #slide-out-widget-area.fullscreen-inline-images .inner .off-canvas-menu-container li[class*="current"] a span { opacity:0.70 !important; } #slide-out-widget-area .off-canvas-menu-container .menu li a, .menuwrapper >.sub-menu.dl-animate-in-4 > li >a, #slide-out-widget-area .menuwrapper >.sub-menu > li > a { margin: 0 !important; } #slide-out-widget-area.fullscreen-inline-images .inner-wrap > .inner { margin: 0; } #slide-out-widget-area.fullscreen-inline-images .inner-wrap { padding-top: 0px !important; justify-content: center; }Thanks Tahir,
Sorry, it's possible between all the emails some things have gotten lost in translation on these last couple items I'm trying to fix. So above is what I currently have in my CSS for the inline menu and since you guys have been so generous with your assistance I'm going to try to be super clear with a summary of these last items I'm trying to fine tune:
1. Menu's vertical spacing: The menu looks perfect on mobile, but is appearing a little low on the desktop so all I was trying to do is move it up about 20% while not affecting the vertical spacing of the menu on mobile.
2. Rollovers: So right now, when you rollover a navigation item, it reduces the opacity to 0.70%...which is fine, but I was hoping that I could reverse the current rollover / on state of the menu's rollovers so that when the menu appears it's 70% opacity and when you rollover an item it would appear at 100% and after you've clicked into a page the link remains at 100% respectively so the user knows they are on that page.
3. Technical Glitches: It seems like for whatever reason I'm having these weird glitches now happening. Here is the description /video of what we are seeing across the board on all our devices:
https://www.dropbox.com/scl/fi/oee2mrn2tjj6go4zq94y8/Nav-Glitch-720.mov?rlkey=lgnuw3q0gv7tr9e4aui22z157&dl=0
You can see the bottom nav appears without any transition at 0:02 and how the active page link oddly hangs before disappearing at around 0:04. This appears to be happening in both Safari and Chrome.
Also, when you reload the page (and before moving interacting with the page) it looks like something is blocking the background image / video:
Anyways...let me know if there might be any quick fixes to these last items...and again, THANK YOU for all the help.