Frink For the top bar in discuss.flarum.org, did you use @sijad links extension, or did you add custom css? If you be willing to share that custom css?
clarkwinkelmann Frink yes it's the links extension. An easy way to tell is to check the source code. All extensions that alter the front end are listed in a <script> tag at the end: var modules = ["locale","sijad\/links\/main","flarum\/akismet\/main",/*[...]*/];
Frink clarkwinkelmann Ok. Thanks for letting me know! Do you have any tips for css styling that might replicate a design that looks like that?
Razor This looks like default to me. But u can customize links by targeting a.LinksButton.Button.Button--link in custom css. For example a.LinksButton.Button.Button--link{ color:#69809b !important; } a.LinksButton.Button.Button--link:hover{ color:orange !important; }
Frink Razor what I am more meaning is like replicating that design with custom header and css without installing the links plugin
Felli Frink At one point this is what was done, but I can't remember what post this was originally discussed in... ?
Razor Frink Is not that hard to achieve. Go to custom header and make a div. Like: <div class="clinks"> </div> In div place links. <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> Now, type <style> </style> In style target clinks class .clinks{} or how u named div class. Now add attributes like display:block; position:fixed; top:5px; left:200px;. Of course u need to change top and left attribute to match style of this extension.
Razor And i forgot to say to add z-index:1000; for class, which will make menu appear on top of navigation. And add a @media and (max-width:768px){ .clinks(or how u named class){ //Code for mobile view } } To make links displayed correctly on mobile or to hide them.
