+- UserSpice (https://userspice.com/forums)
+-- Forum: Support Center (https://userspice.com/forums/forumdisplay.php?fid=23)
+--- Forum: UserSpice 4.3 and Below (https://userspice.com/forums/forumdisplay.php?fid=26)
+--- Thread: Adding new links in the header (/showthread.php?tid=704)
Adding new links in the header - haydentech - 08-30-2017
I've added a couple new links to the header, via usersc/navigation.php. That works fine, and those links get rolled up into the hamburger menu on mobile, as expected.
So my question is partially related to UserSpice and partially to Bootstrap... I now want to add a 3rd item to the header, which should NOT get rolled into the hamburger menu on mobile. Any ideas how to accomplish this?
Adding new links in the header - Brandin - 08-30-2017
I think maybe adding the class of "hidden-xs" may or may not do this...give it a try...
Adding new links in the header - haydentech - 08-31-2017
Hey, thanks for the suggestion! It didn't quite do the trick though (and maybe I didn't explain it very well). hidden-xs does remove it from the hamburger menu, but does not leave in the header. It's just gone when on mobile. I want it to stay in the header always, even on mobile.
Adding new links in the header - Brandin - 08-31-2017
Just leave the class empty then - should do the trick, if I'm understanding your request correctly. My understanding of bootstrap classes is nothing compared to my knowledge of PHP - so @mudmin might be able to help better
Adding new links in the header - karsen - 09-01-2017
After some unsuccessful testing and then some Googling, you'll need to add a pull to get it to stay. Here's the best thread I found explaining it without having to dig through answers: https://stackoverflow.com/questions/36462195/navbar-bootstrap-allowing-one-item-to-be-outside-hamburger-glyphicon
If you still have some trouble getting it to work, please make a link to a pastebin of your navigation and any css changes and we'll help you out.
Adding new links in the header - haydentech - 09-01-2017
Karsen, that got me to the finish line. The trick, which as a fairly new Bootstrap user I was not expecting, is that you need to put the item in both places in the header code (collapsed and non-collapsed) and then show the right one at the right time by using visible-xs and hidden-xs.
Here's some sample code, if anyone's interested:
https://www.bootply.com/658w1tS3SS
Adding new links in the header - karsen - 09-01-2017
There's a way to do it with only one link but the navigation is always a nightmare for me to get it to work how I want. Glad you have it working!