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.

How do I set fixed positioned navigation bar icons?

View previous topic View next topic Go down

How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 3:18 pm

I would like to set my navigation bar icons with a fixed position on it, one row of pictures going from the right and in and one from the left and in towards the middle.



The blue part goes from the very right side of the navigation bar and adds icons with a link when clicked on it inwards towards green and the opposite with green navigation icons towards blue. I just want to set fixed positioned navigation bar icons. Becouse when i go offline and online they move and they are atm centered but theres no option go have right and left either right or left or centered, so i want fixed positioned, anyone know code for this to move icons fixed positioned?

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 3:30 pm

Are you saying they move when you click them? That would be because your hover images are a different size than your static. If they are a different size its going to move regardless if you have a fixed position or not. For example when you set your nav links to text-align: left; they will still move if the hover images are a different size.

Hope I'm in the same ballpark as to your question.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 4:38 pm

@runawayhorses wrote:Are you saying they move when you click them? That would be because your hover images are a different size than your static. If they are a different size its going to move regardless if you have a fixed position or not. For example when you set your nav links to text-align: left; they will still move if the hover images are a different size.

Hope I'm in the same ballpark as to your question.

No they do not move when you click them, they issue or change i want to make is that for example if you got the nav bar icons centered, when u log in it adds nav bar icons due to for example "profile" "messages" and so on and in that way it sort of looks like it gets moved as the row of icons increased/decreases as you have more nav bars icons when your logged in, i just want to have fixed positioned nav bars set from left and right. like have social media icons on the right side and then have the navigation bar icons on the left side like in the picture. Get it?

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 4:48 pm

Ok, you can set it so most all your icons show all the time so it makes no difference if your logged in or not, but the register icon will not show when you are logged in and the logout won't show when you are logged out and viewing the forum as a guest. And the "Messages" isn't going to show if you are logged out. So there is no getting around the fact some icons are not going to show until you are logged in and different ones will show when you are logged out. That is going to make your nav icons move. A fixed position for the Navbar is telling it where to position the icons, and depending on how many when you are logged in or out will change.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 5:16 pm

@runawayhorses wrote:Ok, you can set it so most all your icons show all the time so it makes no difference if your logged in or not, but the register icon will not show when you are logged in and the logout won't show when you are logged out and viewing the forum as a guest. And the "Messages" isn't going to show if you are logged out. So there is no getting around the fact some icons are not going to show until you are logged in and different ones will show when you are logged out. That is going to make your nav icons move. A fixed position for the Navbar is telling it where to position the icons, and depending on how many when you are logged in or out will change.

Exactly I know that, So what I would like to have my nav icons such as "home" "forum" and such to be on the left side of the nav bar, even if they decrease/increase due to being logged in or logged out i still want that row of icons to be on the left side and then to have all they way to the right of the nav bar just have a few icons such as social media to be fixed positioned there that won't be effected or get moved due to the change of logged in or logged out.


Last edited by ryz on July 26th 2013, 5:22 pm; edited 2 times in total

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 5:21 pm

Ok, so you want you nav icons positioned all the way to the left. If you post your forum url I see about getting the code for you.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 5:23 pm

@runawayhorses wrote:Ok, so you want you nav icons positioned all the way to the left. If you post your forum url I see about getting the code for you.

I want to be able to have it all the way to the left and all the way to the right, like two set of groups like this picture:



I'll send u my forum url in a pm to you, As I don't want it to be public yet.

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 5:26 pm

Add this code to your CSS stylesheet:

AP>>Display>>Colors>>CSS Stylesheet:
Code:
ul.navlinks {
text-align: left !important;
}

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 5:42 pm

@runawayhorses wrote:Add this code to your CSS stylesheet:

AP>>Display>>Colors>>CSS Stylesheet:
Code:
ul.navlinks {
text-align: left !important;
}

That works to make them be all the way to the left, now how do I set those social icons to be all the way to right and fixed positon and uneffected by the change of the rest of the nav icons, like cuts of abit of the nav bars and put them to the right side. I sended you a pm as example of what I mean, I wan those sort of icons(re-directing links attached to it when clicked) like it is, maybe u just haft to code them in and remove it from the nav bar options?

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 5:49 pm

I pmed you about the social icon issue. It seems you added those in your template in the same ul li line as your regular nav icons are, you added an extension of that line sort of like this by adding new li tags <li>icons</li>icons<li>icons</li> and the line needs to end where your last regular icon ends. And start a new line after that with the <ul><li> like this <div align="right"><ul><li> all your icons here like before with the ul li tags</div>

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 6:09 pm

@runawayhorses wrote:I pmed you about the social icon issue. It seems you added those in your template in the same ul li line as your regular nav icons are, you added an extension of that line sort of like this by adding new li tags <li>icons</li>icons<li>icons</li> and the line needs to end where your last regular icon ends. And start a new line after that with the <ul><li> like this <div align="right"><ul><li> all your icons here like before with the ul li tags</div>

Sended you another pm, I don't use any templates as phpbb3 don't support it, the current social icons is just added into theap->headers & navigation-> nav links

That's why i assume i must add it in css stylesheet

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 6:19 pm

Oh, well that changes everything disregard my latest PM. I need to rethink how you added them, I never seen someone add social icons through the "headers & navigation" before.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 6:34 pm

@runawayhorses wrote:Oh, well that changes everything disregard my latest PM. I need to rethink how you added them, I never seen someone add social icons through the "headers & navigation" before.

Just simply go byAP -> Display -> headers & navigation -> "Nav links" -> click "add a customized menu" and there just simply add the url to the picture in the "picture" box and then just fill in text and the redirection url when click that icon.

And the picture is just simply a social media picture icon. But i want that specific picture to be as stated fixed positioned amongst the other I will add all the way to the right, which i will assume you'll haft to fix by going into css stylesheet or other method like java, no idea.

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 6:43 pm

Yes but adding them that way in the "headers & navigation" you can't separate them away from the other icons because they are coded in the same line of code. You will need to use javascript, and I don't know how to write javascript, but the site I mentioned does. You will be taking the icons out of headers & navigation and adding them to a javascript file, and then positioning them with CSS.

Edit: You can try this javascript and CSS. You'll need to add your icons in the javascript code where it says to, and the links that the you want the icons to take you to:

<AP>>Modules>>Javascript management>>
Turn your javascript "ON" and set this script for "In all pages"

Code:
$(function() {
  $('#navbar').append('<div id="social_inner"><ul><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a></ul></div>');

Css stylessheet: You position your icons with this code:
Code:
.navbar li {
  display: inline;
  list-style: none;
}
.navbar ul a {
  border: none;
  text-decoration: none;
}
.navbar {
  position: absolute;
  right: 10px;
  top: 5px;
}

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 7:17 pm

@runawayhorses wrote:Yes but adding them that way in the "headers & navigation" you can't separate them away from the other icons because they are coded in the same line of code. You will need to use javascript, and I don't know how to write javascript, but the site I mentioned does. You will be taking the icons out of headers & navigation and adding them to a javascript file, and then positioning them with CSS.

Edit: You can try this javascript and CSS. You'll need to add your icons in the javascript code where it says to, and the links that the you want the icons to take you to:

<AP>>Modules>>Javascript management>>
Turn your javascript "ON" and set this script for "In all pages"

Code:
$(function() {
  $('#navbar').append('<div id="social_inner"><ul><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a></ul></div>');

Css stylessheet: You position your icons with this code:
Code:
.navbar li {
  display: inline;
  list-style: none;
}
.navbar ul a {
  border: none;
  text-decoration: none;
}
.navbar {
  position: absolute;
  right: 10px;
  top: 5px;
}

Now that just moved my whole nav bar and the button page nav bar all the way up to the upper right corner, when i added the css code

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 7:44 pm

did you add your social icons to the javascript?


Try this updated code instead I made a major mistake on the one above.


Code:
.social_inner li {
  display: inline;
  list-style: none;
  }
  .social_inner ul a {
  border: none;
  text-decoration: none;
  }
  .social_inner {
  position: absolute;
  right: 10px;
  top: 5px;
  }

Code:
$(function() {
  $('#navbar').append('<div id="social_inner"><ul><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a></ul></div>');

It won't be positioned correctly at first you'll need to play around with the positioning in the css.

You might want to consider having them line up vertically on the far right side of your forum, in which case you would remove this part of the css:

Code:
list-style: none;

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 8:15 pm

@runawayhorses wrote:did you add your social icons to the javascript?


Try this updated code instead I made a major mistake on the one above.


Code:
.social_inner li {
  display: inline;
  list-style: none;
  }
  .social_inner ul a {
  border: none;
  text-decoration: none;
  }
  .social_inner {
  position: absolute;
  right: 10px;
  top: 5px;
  }

Code:
$(function() {
  $('#navbar').append('<div id="social_inner"><ul><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a><a href="URL OF SITE GOES HERE"><li><img src="URL OF ICON GOES HERE" title="TITLE Name GOES HERE"/></li></a></ul></div>');

It won't be positioned correctly at first you'll need to play around with the positioning in the css.

You might want to consider having them line up vertically on the far right side of your forum, in which case you would remove this part of the css:

Code:
list-style: none;

All the codes are applied properly, still can't see any icons. Does navbar still need to be changed in"$('#navbar') "?

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 8:20 pm

Well I'm out of my league trying to work with javascript, it was a longshot at best for me to make it work for you. My social icons that you see on my forum if you have looked are placed there through the template with no javascript involved. So I think you would be better served if you went to that site I recommended in PM or wait here for someone to possibly help you. But quite frankly they specialize with javascript over there and thats what you're going to need since you can't edit the template and add the icons manually.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by ryz on July 26th 2013, 8:35 pm

@runawayhorses wrote:Well I'm out of my league trying to work with javascript, it was a longshot at best for me to make it work for you. My social icons that you see on my forum if you have looked are placed there through the template with no javascript involved. So I think you would be better served if you went to that site I recommended in PM or wait here for someone to possibly help you. But quite frankly they specialize with javascript over there and thats what you're going to need since you can't edit the template and add the icons manually.

Yea, thank you for taking the time in trying to help me solve it yourself, i just posted a topic on the website in hope they can solve it.

ryz
Forumember

Male Posts : 85
Reputation : 1
Language : English

Back to top Go down

Re: How do I set fixed positioned navigation bar icons?

Post by runawayhorses on July 26th 2013, 9:28 pm

Ok great, and you're welcome, good luck.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

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