The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Sticky Navbar Design Issues!

View previous topic View next topic Go down

Solved Sticky Navbar Design Issues!

Post by Chellizard on September 14th 2016, 1:26 am

Technical Details


Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Other
Screenshot of problem : https://i.gyazo.com/2f3f2169deaf7ce8686219d75bfbafa9.gif
Who the problem concerns : All members
When the problem appeared : As soon as I entered the script.
Forum link : http://superhero-rpg.com

Description of problem

I would like to know how to edit the CSS to make the navbar display text instead of the images that are currently in my site's navbar while also keeping the fancy images for my main navbar.

Thanks!


Last edited by Chellizard on September 15th 2016, 12:20 pm; edited 1 time in total

Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Chellizard on September 15th 2016, 8:19 am

Tiny little bump...

but did I post this in the wrong section? I hope not. Sad

Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Draxion on September 15th 2016, 8:22 am

Hey there, @Chellizard, where you get the tutorial on how to install the Navbar sticky also explains on how you can use links instead of images.

Draxion
Forumember

Posts : 369
Reputation : 51
Language : English

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by SLGray on September 15th 2016, 8:25 am

@Draxion wrote:Hey there, @Chellizard, where you get the tutorial on how to install the Navbar sticky also explains on how you can use links instead of images.
Where exactly in the tutorial does it show this?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35670
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Draxion on September 15th 2016, 8:28 am

@SLGray wrote:
@Draxion wrote:Hey there, @Chellizard, where you get the tutorial on how to install the Navbar sticky also explains on how you can use links instead of images.
Where exactly in the tutorial does it show this?

Under the third step, Modifications. 'CustomNav' and 'keepDefault'.
http://help.forumotion.com/t143777-make-your-navbar-sticky

Draxion
Forumember

Posts : 369
Reputation : 51
Language : English

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by SLGray on September 15th 2016, 8:30 am

@Draxion wrote:
@SLGray wrote:
@Draxion wrote:Hey there, @Chellizard, where you get the tutorial on how to install the Navbar sticky also explains on how you can use links instead of images.
Where exactly in the tutorial does it show this?

Under the third step, Modifications. 'CustomNav' and 'keepDefault'.
http://help.forumotion.com/t143777-make-your-navbar-sticky
That is only for showing or not showing the default links/images. The codes use the default links/images from the navbar.


Last edited by SLGray on September 15th 2016, 8:31 am; edited 1 time in total


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35670
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Draxion on September 15th 2016, 8:31 am

@SLGray wrote:
@Draxion wrote:
@SLGray wrote:
@Draxion wrote:Hey there, @Chellizard, where you get the tutorial on how to install the Navbar sticky also explains on how you can use links instead of images.
Where exactly in the tutorial does it show this?

Under the third step, Modifications. 'CustomNav' and 'keepDefault'.
http://help.forumotion.com/t143777-make-your-navbar-sticky
That is only for showing or not showing the default links.

Correct, but if you set the option 'keepDefault' to false, you can use the same 'CustomNav' to create your own Navbar by whatever you like.

Draxion
Forumember

Posts : 369
Reputation : 51
Language : English

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by SLGray on September 15th 2016, 8:32 am

Well that is one way to do it.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35670
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Draxion on September 15th 2016, 8:35 am

@Chellizard, if you follow the steps I provided, your default Navbar will remain underneath the header but when the sticky collapses,it will show text links instead of images. As I believe that is what you are asking to do. Correct me please if I am wrong.

Draxion
Forumember

Posts : 369
Reputation : 51
Language : English

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Chellizard on September 15th 2016, 8:42 am

Okay @Draxion and @SLGray so there's no way for me to just have text links without inputting my own links one by one? Or is that what setting it to false does?

Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Draxion on September 15th 2016, 8:43 am

You would provide them yourself.

Draxion
Forumember

Posts : 369
Reputation : 51
Language : English

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Chellizard on September 15th 2016, 8:47 am

So you're saying it's impossible to just make the sticky navbar have links without going through the hassle of getting rid of the images? But only for the sticky navbar... Haha.

I can do the links myself, I guess, but I could've done that before... S'why I made this thread to find an alternate way rather than setting it to false and putting in my own. Ya kno?

Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Draxion on September 15th 2016, 8:48 am

Wait... You lost me there. So you want to keep the images you currently have on your Navbar or no?

Draxion
Forumember

Posts : 369
Reputation : 51
Language : English

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Chellizard on September 15th 2016, 8:53 am

I want to keep my main navbar that's already on the site. But, for the sticky navbar, I want text.

That, or a way to keep the images and have the navbar hidden still... cause changing the height of the navbar made it poke out even when scrolled to the top of the page.

Here's a screenshot:


Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Draxion on September 15th 2016, 8:54 am

Okay, so I was correct the first time. Yes, what I explained to do will only edit the collapsedNavbar. It won't do anything to your default one. So the original will still display images while the collapsedone will reveal only text links.

Draxion
Forumember

Posts : 369
Reputation : 51
Language : English

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Chellizard on September 15th 2016, 8:57 am

Yes... but only if I create the links my self.

I was looking for a work around to skip writing out all the links and making sure they all link to the proper place. Razz

Is there not an easier way to force the Sticky Navbar to default to text while the site Navbar stays as pictures?

Because I know there's a way to make the main Navbar default to text instead of images - but I don't want my main Navbar to only be text.

Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Draxion on September 15th 2016, 8:58 am

Unfortunately to my knowledge, there is no way unless you change the default Navbar to text links.

Draxion
Forumember

Posts : 369
Reputation : 51
Language : English

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Chellizard on September 15th 2016, 9:01 am

Alright.

So on to my second question then.

Is there a way to make the navbar hide itself while the height is set to 80?

Here is the CSS - even though I only changed 1 field:

Code:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:80px;
  position:fixed;
  right:0;
  z-index: 999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#CCC;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}


Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by APE on September 15th 2016, 11:32 am

The hight is the size of the box that drops down not where it will show when scrolling so you set it to 30 then it will be small but if you set it to 80px then it will make the box get wider from top to bottom.





APE
Manager
Manager

Male Posts : 8339
Reputation : 718
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by Chellizard on September 15th 2016, 11:40 am

@APE So how do I get the box to stay hidden when the box is 80px tall?

EDIT:

I've gotten the navbar to be... relatively how I want it to look so I am fine if no one else has any solutions to my original question.

I'd like to wait and maybe see if anyone else with CSS/Coding experience has an ideas that could help... Until then:

Thanks to @Draxion and @SLGray and @APE ! :]

Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by APE on September 15th 2016, 12:12 pm

it will only hide when your at the top of your forum. as soon as you go passed the home navbar then it will show there is no way to hide it until you want it but there is a button to hide it if you don't want to see it its the one that looks like this >>

now as for your other Q well the way this works is t read you main navbar and it makes a copy of that navbar so there is no way to change this unless you add the links your self.

Sorry.

APE





APE
Manager
Manager

Male Posts : 8339
Reputation : 718
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Sticky Navbar Design Issues!

Post by APE on September 19th 2016, 12:16 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules





APE
Manager
Manager

Male Posts : 8339
Reputation : 718
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum