I'm working on a project for a client and they're busting my chops about what Divi can do...but I hate Divi and for all that it can do, it's a monstrosity of a theme. Anyway, one of the things Divi can do that Salient can't currently do...as far as I know...is to make any row sticky. If you can think of a way to do that either through a snippet or as an additional feature you'd save me in a big way.
So basically, I'm just trying to see if you can help me make a row sticky on any page. Thanks in advance.
Initially I tried to create a row with a 1/6 + 5/6 columns and I tried to put a title on the 1/6 and put the sub menu in the 5/6, but they didn't sit next to each other and it was pushing the 1/6 above or below the menu. If there was a way to update the sub menu element to allow for a menu title, that would be awesome, but if not, I was thinking that if I could have a sticky row I could simulate a menu by having 4 words that link to other pages. The main functionality that we're looking for is the ability to have this sub menu or sticky row stay sticky at the top while users scroll down the page.
Thanks for the quick reply. Our original post mentions the sticky page sub menu. The problem we're having with that element is that we need a label on the menu (similar to the page sub menu in this link: https://www.bentley.edu/undergraduate).
Initially I tried to create a row with a 1/6 + 5/6 columns and I tried to put a label in the 1/6 column and put the page sub menu in the 5/6, but they weren't lining up. The page sub menu wouldn't sit side by side with the element in the 1/6 page.
I'm hoping there's a way to make it so that either the page sub menu can have a label option added to it, or to have a way for the page sub menu to exist to the right or left of a label on the same row (without it pushing above or below).
-- If that wasn't possible, we thought it might be worth exploring the ability to make any row sticky so we could simulate a menu similar to the one above.
A label can be added using a Pseudo css element if need be.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks for the quick reply. It looks like that might be a site wide label. Is there a way to have a label specific to that page sub menu? We're hoping to have about 15 different pages that all have different submenus and different labels.
Yes simply add a page-id css selector to the css like this or add the Css to the Page Builder Custom Css Box so it applies to that particular page only :http://prntscr.com/r0o6f3 .
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks for getting back to me. Sorry for not being more clear. I was referring to the "Menu Title" in the snippet you sent. I tried to edit that font using CSS Hero and it changed the base font for the actual sub menu text as well. Is there a way to just edit the pseudo text independently?
I'm working on a project for a client and they're busting my chops about what Divi can do...but I hate Divi and for all that it can do, it's a monstrosity of a theme. Anyway, one of the things Divi can do that Salient can't currently do...as far as I know...is to make any row sticky. If you can think of a way to do that either through a snippet or as an additional feature you'd save me in a big way.
So basically, I'm just trying to see if you can help me make a row sticky on any page. Thanks in advance.
Ultimately, my goal is to make something like the navy blue menu on this page:
https://www.bentley.edu/undergraduate
Initially I tried to create a row with a 1/6 + 5/6 columns and I tried to put a title on the 1/6 and put the sub menu in the 5/6, but they didn't sit next to each other and it was pushing the 1/6 above or below the menu. If there was a way to update the sub menu element to allow for a menu title, that would be awesome, but if not, I was thinking that if I could have a sticky row I could simulate a menu by having 4 words that link to other pages. The main functionality that we're looking for is the ability to have this sub menu or sticky row stay sticky at the top while users scroll down the page.
Hey Again, Hope you had a Great Weekend,
There is a Page Submenu Option that can be made Sticky: http://prntscr.com/r09qc6 .
Best
ThemeNectar Support Team
Thanks for the quick reply. Our original post mentions the sticky page sub menu. The problem we're having with that element is that we need a label on the menu (similar to the page sub menu in this link: https://www.bentley.edu/undergraduate).
Initially I tried to create a row with a 1/6 + 5/6 columns and I tried to put a label in the 1/6 column and put the page sub menu in the 5/6, but they weren't lining up. The page sub menu wouldn't sit side by side with the element in the 1/6 page.
I'm hoping there's a way to make it so that either the page sub menu can have a label option added to it, or to have a way for the page sub menu to exist to the right or left of a label on the same row (without it pushing above or below).
--
If that wasn't possible, we thought it might be worth exploring the ability to make any row sticky so we could simulate a menu similar to the one above.
A label can be added using a Pseudo css element if need be.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.page-submenu div:before { content: "Menu Title"; position: absolute; left: 0px !important; display: inline-block; padding: 20px !important; font-size: 25px; }Thanks
ThemeNectar Support Team
Thanks for the quick reply. It looks like that might be a site wide label. Is there a way to have a label specific to that page sub menu? We're hoping to have about 15 different pages that all have different submenus and different labels.
Yes simply add a page-id css selector to the css like this or add the Css to the Page Builder Custom Css Box so it applies to that particular page only :http://prntscr.com/r0o6f3 .
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.page-id-21 .page-submenu div:before { content: "Menu Title"; position: absolute; left: 0px !important; display: inline-block; padding: 20px !important; font-size: 25px; }Thanks
ThemeNectar Support Team
Thank you! I'll try that out and let you know how it goes.
This seems to work. I think my only question now is what we'd need to add to the CSS to control the font, size, etc.
Hey Again, Hope you had a Great Weekend,
Are you referring to the Sub Menu Items or the Pseudo text ?.
Best
ThemeNectar Support Team
Thanks for getting back to me. Sorry for not being more clear. I was referring to the "Menu Title" in the snippet you sent. I tried to edit that font using CSS Hero and it changed the base font for the actual sub menu text as well. Is there a way to just edit the pseudo text independently?
Yes you can use the same css selector :
.page-id-21 .page-submenu div:before { content: "Menu Title"; font-family:'Open Sans'; }ThemeNectar Support Team
That worked perfectly! You guys are geniuses! Thank you so much for your time! Love Salient!
Glad to be of help .
Best
ThemeNectar Support Team