• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

[RainDD] Floating Navigation 1.0.2

No permission to download

rainmotorsports

Well-known member
#1
rainmotorsports submitted a new resource:

[RainDD] Floating Navigation - Add floating navigation to stock based themes.

Add floating navigation similar to www.digitalpoint.com and other implementations to your stock or stock based Xenforo themes. Perfect starter code for your own floating navigation system or theme.

Features & Fixes:
  • Enable or Disable per theme to prevent interference with incompatible or already equipped themes.
  • DigitalPoint style box shadow leaving search in its stock position.
  • Work's with the moderator bar and any addons...
Read more about this resource...
 

Mark T

Active member
#2
Installed today, and I like what it does. The only thing I need to work on is the alert notifications and keeping the bubble intact.

But it looks good.
 

Mark T

Active member
#3
Fixed the bubbles in css, which looks awsome with this.

Now I just wish to find a way to make the transition smoother, otherwise perfect for my site.
 

rainmotorsports

Well-known member
#4
I never thought about the bubbles. Our site the menu bar is large enough they still show. On the stock theme it is definitely an issue. Trying to see how digitalpoint styled theirs. So far I am seeing a top 16px adjustment. Without an alert its kinda hard to see all of it. I wonder if an overlap is cool with people or if I should space out the menus a bit.

If I find a standard transition that looks good I will add it to the options as well. Going to push out a minor update later.

Undid the display none to see them:
upload_2016-5-20_18-22-19.png

Not a huge fan, I mean it works but... That and I can't steal all the ideas from the same place lol.
 

rainmotorsports

Well-known member
#5

rainmotorsports

Well-known member
#11
Alright well for one the javascript isn't triggering or might not even be present. I added the navfloat class to the header and this ended up happening:
upload_2016-5-21_16-30-48.png

On your header template do you have "prevent template modifications" checked? That's one reason the JS wouldn't show up. I feel like some of the CSS is missing as well which doesn't exactly make sense lol.

Even with all that working the box shadow issues tells me there is definitely some adjustments needed to make this work for you.
 

tommydamic68

Well-known member
#12
Alright well for one the javascript isn't triggering or might not even be present. I added the navfloat class to the header and this ended up happening:
View attachment 134595

On your header template do you have "prevent template modifications" checked? That's one reason the JS wouldn't show up. I feel like some of the CSS is missing as well which doesn't exactly make sense lol.

Even with all that working the box shadow issues tells me there is definitely some adjustments needed to make this work for you.
Yes that is checked, I did uncheck it and tried it, it did work but have this line or shading I guess? Any fix?

Screen Shot 2016-05-21 at 6.47.43 PM.png
 

rainmotorsports

Well-known member
#13
You can undo the shadow in the style properties for the addon. It will make the search bar look out of place when scrolling. Trying to figure out a solution to that now but im not sure yet. Id just take the box shadow off for now?

Honestly think you would be better off with @BassMan plugin for this. But I can shoot you over some CSS to move the search bar up upon float instead.
 

tommydamic68

Well-known member
#14
You can undo the shadow in the style properties for the addon. It will make the search bar look out of place when scrolling. Trying to figure out a solution to that now but im not sure yet. Id just take the box shadow off for now?

Honestly think you would be better off with @BassMan plugin for this. But I can shoot you over some CSS to move the search bar up upon float instead.
I'll try the CSS - thanks.
 

rainmotorsports

Well-known member
#15
Alright this will move the search up and cancel the background around it. Then put the background back whenever the search dropdown is active:

#header.navfloat #QuickSearch
{
top: -29px;
background-color: transparent;
}

#header.navfloat #QuickSearch .formPopup
{
width: 250px;
background-color: transparent;
}

#header.navfloat #QuickSearch.active
{
background-color: rgb(237, 238, 225);
}

You can put it in the RainDD_FN.css or the Extra.css it doesn't matter.
 

tommydamic68

Well-known member
#16
Alright this will move the search up and cancel the background around it. Then put the background back whenever the search dropdown is active:

#header.navfloat #QuickSearch
{
top: -29px;
background-color: transparent;
}

#header.navfloat #QuickSearch .formPopup
{
width: 250px;
background-color: transparent;
}

#header.navfloat #QuickSearch.active
{
background-color: rgb(237, 238, 225);
}

You can put it in the RainDD_FN.css or the Extra.css it doesn't matter.
it looks like this with the CSS.
Screen Shot 2016-05-21 at 9.48.40 PM.png