XF 1.x Change navigation bar using XenBase

abdfahim

Registered
Just so that I don't try to reinvent the wheel, is there an easy way to control the look of the Navigation bar in XenBase framework?

Basically, I want to make the Navbar of EDGE like the one used in this site

upload_2017-2-5_21-46-24.png
 

Russ

Pixel Exit Staff
Anything in specific about the navbar by chance? The little red bars are simple CSS:

Code:
li.navTab.selected .xbTabPopupArrow {
width: 100%;
height: 5px;
background: @xbButtonBackground;
position: relative;
}
li.navTab:hover .xbTabPopupArrow {
width: 100%;
height: 5px;
transition: all 0.2s ease-in-out;
background: @xbButtonBackground;
position: relative;
}

Which trying on Edge I've found a "bug" in xenbase, apparently our helper xbTabPopupArrow we place on all nav tabs isn't on the search tab, oops :), fixed for next release.

As for the other parts of it, it's technically an entirely different setup. Edge uses wide style out of the box, so not enabling that would change the entire appearance of Edge.
 

Russ

Pixel Exit Staff
You can target it using extra.css:

Code:
.XenBase .navTabs .navTab.PopupClosed:hover .SplitCtrl:before
{
   content: "\f0c9";
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.