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 to move each individual navlink?

View previous topic View next topic Go down

How to move each individual navlink?

Post by sonyman on October 13th 2014, 7:39 pm

I want to move each individual navlink using CSS but I can't seem to figure out how. Here is an example below of how I want it to look like.



I want to move each navlink to the side of my logo like in that picture, 3 on each side. How can I do this?



Here is my navlink code.
Code:
a {
color: #ff4847;
text-decoration: none;
-moz-transition: color .3s ease-in-out;
-ms-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
-webkit-transition: color .3s ease-in-out;
}
a:link{
color: #dedede;
text-decoration: none;
}
a.mainmenu {
color: #774b6e;
text-decoration: none;
}
a:active{
color: #dedede;
text-decoration: underline;
}
a:hover{
color: #fefefe;
text-decoration: none;
}
a.forumtitle {
color: #dedede;
font-family: Arial,Helvetica,sans-serif;
font-size: 1.2em;
font-weight: normal;
text-decoration: none;
}
a.forumtitle:hover {
color: #fefefe;
text-decoration: none;
}
a.forumtitle:active {
color: #dedede;
}
a.topictitle {
font-family: Century Gothic,Arial,Helvetica,sans-serif;
font-size: 1.1em;
font-weight: normal;
color: #dedede;
text-decoration: none;
}
div.topic-title-container {
display: inline;
}
.topic-title {
display: inline;
font-size: 12px;
text-align: left;
}
.topic-title-post {
}
a.topictitle:hover {
color: #fefefe;
text-decoration: none;
}
a.topictitle:active {
color: #dedede;
}


Last edited by sonyman on October 14th 2014, 1:04 am; edited 2 times in total

sonyman
New Member

Posts : 21
Reputation : 1
Language : english

Back to top Go down

Re: How to move each individual navlink?

Post by Ange Tuteur on October 13th 2014, 9:05 pm

Hello sonyman,

Could you provide a link to your forum ?

Thanks.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: How to move each individual navlink?

Post by sonyman on October 13th 2014, 10:32 pm

@Ange Tuteur wrote:Hello sonyman,

Could you provide a link to your forum ?

Thanks.

http://gjtesting.forumotion.com/

I'm still working on it so it doesn't look right, but pretty much, the logo on the left should be in the center and the navlinks at the top should be to the sides of the logo. The navbar is also fixed so I will fix that once I figure out how to do this. Thanks.

EDIT: Still working on it so depending on when you look at the site, stuff might look different.

sonyman
New Member

Posts : 21
Reputation : 1
Language : english

Back to top Go down

Re: How to move each individual navlink?

Post by Ramdaman on October 13th 2014, 10:44 pm

Try this code:

Code:
a.mainmenu {
margin-left: 5px;
}


You can change the "5" in 5px to anything you'd like. It increases the distance. However it may or may not work with your forum version.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Re: How to move each individual navlink?

Post by sonyman on October 13th 2014, 10:49 pm

@Ramdaman wrote:Try this code:

Code:
a.mainmenu {
margin-left: 5px;
}


You can change the "5" in 5px to anything you'd like. It increases the distance. However it may or may not work with your forum version.

Thanks, but this just changes the distance between each navlink. I want to move each one individually. 3 one each side of the logo that should be on the center.


EDIT: Just realized I pasted the wrong code when I made the topic, here is my navlinks code.

Code:
a {
color: #ff4847;
text-decoration: none;
-moz-transition: color .3s ease-in-out;
-ms-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
-webkit-transition: color .3s ease-in-out;
}
a:link{
    color: #dedede;
    text-decoration: none;
    }
a.mainmenu {
color: #774b6e;
text-decoration: none;
}
a:active{
    color: #dedede;
    text-decoration: underline;
    }
a:hover{
    color: #fefefe;
    text-decoration: none;
    }
a.forumtitle {
   color: #dedede;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 1.2em;
   font-weight: normal;
   text-decoration: none;
   }
a.forumtitle:hover {
   color: #fefefe;
   text-decoration: none;
   }
a.forumtitle:active {
    color: #dedede;
    }
a.topictitle {
   font-family: Century Gothic,Arial,Helvetica,sans-serif;
   font-size: 1.1em;
   font-weight: normal;
   color: #dedede;
   text-decoration: none;
   }
div.topic-title-container {
   display: inline;
   }
.topic-title {
   display: inline;
   font-size: 12px;
   text-align: left;
   }
.topic-title-post {
   }
a.topictitle:hover {
   color: #fefefe;
   text-decoration: none;
   }
a.topictitle:active {
    color: #dedede;
    }



DOUBLE EDIT: I fixed my logo and positioned it how it should be, now all I need now is help to position the links on either side of the logo in the center.


http://gjtesting.forumotion.com/

sonyman
New Member

Posts : 21
Reputation : 1
Language : english

Back to top Go down

Re: How to move each individual navlink?

Post by Ange Tuteur on October 14th 2014, 2:41 am

I only see 4 navlinks, so it might vary for you. See how this looks :
Code:
div#page-header div.navbar ul.linklist {
 top:285px;
 left:0;
 right:0;
 text-align:center;
 z-index:3;
}

#page-header a[href="/"] { margin-right:150px }
#page-header a[href="/register"], #page-header a[href^="/profile"] { margin-left:150px }


Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: How to move each individual navlink?

Post by _Twisted_Mods_ on October 14th 2014, 3:51 am

#i_icon_mini_index {
position:absolute!important;
top:10% !important;
left:45% !important;
}
#i_icon_mini_portal {
position:absolute!important;
top:20% !important;
left:40% !important;
}
#i_icon_mini_members {
position:absolute!important;
top:30% !important;
left:35% !important;
}
#i_icon_mini_profile {
position:absolute!important;
top:10% !important;
left:55% !important;
}
#i_icon_mini_message {
position:absolute!important;
top:20% !important;
left:60% !important;
}
#i_icon_mini_logout {
position:absolute!important;
top:30% !important;
left:65% !important;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: How to move each individual navlink?

Post by sonyman on October 14th 2014, 3:57 am

@Ange Tuteur wrote:I only see 4 navlinks, so it might vary for you. See how this looks :
Code:
div#page-header div.navbar ul.linklist {
 top:285px;
 left:0;
 right:0;
 text-align:center;
 z-index:3;
}

#page-header a[href="/"] { margin-right:150px }
#page-header a[href="/register"], #page-header a[href^="/profile"] { margin-left:150px }




Thank you so much for this helpful answer, it solved my question. Very HappyI just slightly fixed the code to look like how I wanted it to. I just have one more question. When one logs into the site, the navlinks change dramatically. It ends up looking like this.


It goes from this :


To this :

I was just wondering if you might know of a solution to this, maybe in the CSS coding or maybe even a javascript code. I already know how to get rid of the navlinks as I already got rid of some, maybe there is a way to change the way navlinks change when your logged in?

Thanks.


EDIT: I was looking at the navbar and links and noticed only a few of them were causing problems. The "Memberlist" navlink seems to be spacing out the links to the side of them. Another one of the links causing problems were the "You have no new messages" which takes up alot of space, and changes whether you have a message or not. Also the "[Log out (insert name here)]" also causes a problem since depending on how big your name is, it could distort the look of the entire navbar. I was thinking that maybe there is a way to change the names of these? Like changing the "[Log out (insert name here)]" to just simply "Log out"?

sonyman
New Member

Posts : 21
Reputation : 1
Language : english

Back to top Go down

Re: How to move each individual navlink?

Post by Ange Tuteur on October 14th 2014, 6:16 am

Add this to your stylesheet for the memberlist link :
Code:
#page-header a[href="/memberlist"] {
  margin-left:-150px;
  margin-right:150px;
}

It should offset the margin from the portal, and add a margin to the right of it.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: How to move each individual navlink?

Post by _Twisted_Mods_ on October 14th 2014, 8:34 am

think using % is better then px because different people have different aspect ratios and it keeps it the same on all of them .. but hey thats just me
also thought my style of links going down side was better Razz

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: How to move each individual navlink?

Post by sonyman on October 14th 2014, 9:25 pm

@Ange Tuteur wrote:Add this to your stylesheet for the memberlist link :
Code:
#page-header a[href="/memberlist"] {
 margin-left:-150px;
 margin-right:150px;
}

It should offset the margin from the portal, and add a margin to the right of it.
It looks alot better now, thanks for all your help Very Happy.
thetwistedkilla wrote:think using % is better then px because different people have different aspect ratios and it keeps it the same on all of them .. but hey thats just me
also thought my style of links going down side was better Razz
I tried your code and it just centered all of the links on the top, im not sure why. But thanks for your help Very Happy. Also are you sure? I have 2 screens, one large and one small and they both look about right on them.

sonyman
New Member

Posts : 21
Reputation : 1
Language : english

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