I've created a custom navigation menu using Bootstrap 3.0 and based on reading some of the ticket discussions, I can't just insert the bootstrap files without causing a conflict with salient. This menu will only be used on the home page, and I'm only going to need the Bootstrap CSS and JS files for the div that the menu is going to be in. I guess i could re-write the menu using Salient classes, but if there is a way to get it to work with Bootstrap, I I think that would be easier.
Specifically, we've restyled Bootstrap's tabs into a sort of tile based content slider. So we're using tabs and then the hidden/visible classes to control menu type visibility at the default bootstrap breakpoints.
Actually, now that I've written this I'd really only need to know is if bootstrap's tab classes conflict with Salient's and what custom media queries to use to replicate the hidden/visible bootstrap classes.
If you're just going to include the tab classes you should be fine - the main thing in bootstrap that would cause a conflict in the column system since Salient already has a different one defined.
As for the hidden class - you can insert the rules you need into the responsive.css stylesheet. That's the file that contains all of the media queries for the different viewports and simply running a search for "@media" should quickly take you through all of them :)
Hey thanks, that does seem to work, with one caveat that doesn't have anything to do with Bootstrap...
I've made the tabs absolute positioned at the desktop screen size to achieve a dynamic sizing behavior that I want, and it won't display. At tablet and phone sizes, the tabs aren't absolute positioned and they're working fine, and in the browser dev tools I can see that when I turn off absolute positioning, the div shows up. Are there any tips to using absolute positioning in Salient? Is it possible?
I've tried adding it in a full width row using the raw html element and I've tried adding it using just the plain text editor without the Visual Composer interface to the same result.
*update: I achieved the effect I wanted without having to use absolute positioning, so I'm good now. Did you know you can use calc(xx% - xxxpx) for setting the width of an element?! That's pretty awesome!
I've created a custom navigation menu using Bootstrap 3.0 and based on reading some of the ticket discussions, I can't just insert the bootstrap files without causing a conflict with salient. This menu will only be used on the home page, and I'm only going to need the Bootstrap CSS and JS files for the div that the menu is going to be in. I guess i could re-write the menu using Salient classes, but if there is a way to get it to work with Bootstrap, I I think that would be easier.
Specifically, we've restyled Bootstrap's tabs into a sort of tile based content slider. So we're using tabs and then the hidden/visible classes to control menu type visibility at the default bootstrap breakpoints.
Actually, now that I've written this I'd really only need to know is if bootstrap's tab classes conflict with Salient's and what custom media queries to use to replicate the hidden/visible bootstrap classes.
Would that work? Any other suggestions?
Hey Matt,
If you're just going to include the tab classes you should be fine - the main thing in bootstrap that would cause a conflict in the column system since Salient already has a different one defined.
As for the hidden class - you can insert the rules you need into the responsive.css stylesheet. That's the file that contains all of the media queries for the different viewports and simply running a search for "@media" should quickly take you through all of them :)
Hey thanks, that does seem to work, with one caveat that doesn't have anything to do with Bootstrap...
I've made the tabs absolute positioned at the desktop screen size to achieve a dynamic sizing behavior that I want, and it won't display. At tablet and phone sizes, the tabs aren't absolute positioned and they're working fine, and in the browser dev tools I can see that when I turn off absolute positioning, the div shows up. Are there any tips to using absolute positioning in Salient? Is it possible?
I've tried adding it in a full width row using the raw html element and I've tried adding it using just the plain text editor without the Visual Composer interface to the same result.
*update: I achieved the effect I wanted without having to use absolute positioning, so I'm good now. Did you know you can use calc(xx% - xxxpx) for setting the width of an element?! That's pretty awesome!
Hey Matt!
Glad you got it sorted and thanks for posting the update.
Cheers
ThemeNectar Support Team