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 change style of Navigation Menu

View previous topic View next topic Go down

Solved How to change style of Navigation Menu

Post by Matrixx on April 21st 2014, 12:19 pm

Hi†

How can i change the style of the navigation menu, using CSS code or .PNG


Last edited by Matrixx on April 22nd 2014, 4:25 pm; edited 2 times in total

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 21st 2014, 12:34 pm

Hi Very Happy

Link to forum(s), version(s), and what you want it to look like please. I already sent you a private message awhile ago about the style you asked so if it's not what you're looking for then please post here.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 21st 2014, 4:02 pm

Mine Forum]
Version: phpbb3 for now i will change it to phpbb2 now im looking for nice theme and i will change it so lets say phpbb2†

I want to look something like that site ÕŗųŗŽÓ-Home, ‘Óūůž-Forum, —ķū‚ķūŤ-Servers, SMS ”ŮŽů„Ť-SMS, ŃŗŪ ŽŤŮÚ-Ban List,  ÓŪÚŗÍÚ-Contact †-- Translate for the site you will see www.BGservers.com i want something like that Navigation Menu

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Sir Chivas™ on April 21st 2014, 4:45 pm

Hi,

Let me get this straighten out, you want to show a translate before or after the navigation button?

Regards,
Sir Chivas

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 21st 2014, 5:00 pm

I translate to don`t wonder what that means.

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 21st 2014, 5:54 pm

Hi Very Happy

Basically if you want the word changed Confused. Anyway, I can't give you their exact style but I can give you a pattern :/.

Code:
a.mainmenu {
 †background-color: #Color !important;
 †padding: #px #px #px #px;
 †margin: #px #px #px #px;
 †border-right: #px solid #Color;
 †color: #Color !important;
}
a.mainmenu:hover {
 †background-color: #Color !important;
 † padding: #px #px #px #px;
 †margin: #px #px #px #px;
 †border-right: #px solid #Color;
 †color: #Color !important;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 21st 2014, 7:45 pm

Doesn`t work††:/

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 21st 2014, 11:36 pm

Hi Very Happy

Did you even change #px, #Color, etc to the design you want? Please post the code you're using.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 22nd 2014, 12:51 pm

Of course, this code:

a.mainmenu {
† background-color: #176775 !important;
† padding: #14px #14px #14px #14px;
† margin: #14px #14px #14px #14px;
† border-right: 14px solid #176775;
† color: #176775 !important;
}
a.mainmenu:hover {
† background-color: #000000 !important;
† †padding: #12px #12px #12px #12px;
† margin: #12px #12px #12px #12px;
† border-right: #12px solid #176775;
† color: #FFFFFF !important;
}


Is†equal on this :


Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 22nd 2014, 12:53 pm

Hi Very Happy

Well, what seems to be the problem with it (Other than the fact that it has an inappropriate background color)?

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 22nd 2014, 1:02 pm

I don`t see the words. is there any way to put any picture ? to be like background on navigation menu

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 22nd 2014, 1:06 pm

Hi Very Happy

Well, you're using the same color for background and color, lol:

Code:
a.mainmenu {
  background-color: #176775 !important;
  padding: #14px #14px #14px #14px;
  margin: #14px #14px #14px #14px;
  border-right: 14px solid #176775;
  color: #176775 !important;
}

^ That's your code above. 'color' actually indicates the color of the FONT, and not the background, so change it.

Putting an image would cancel out the background-color code.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 22nd 2014, 1:27 pm

And this not working. Now i don't see the text.

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 22nd 2014, 1:38 pm

Hi Very Happy

I told you to change color... anyway, just use this >.>:

Code:
a.mainmenu {
 †background-color: #176775 !important;
 †padding: #14px;
 †margin: #14px;
 †border-right: 14px solid #176775;
 †color: #FFF !important;
}
a.mainmenu:hover {
 †background-color: #000000 !important;
 † padding: #12px;
 †margin: #12px;
 †border-right: #12px solid #176775;
 †color: #FFFFFF !important;
}

Anyway, decrease #12 px and #14px value. It's too much.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by SocialAcademy on April 22nd 2014, 1:46 pm

hey you try this

Code:

a.mainmenu {background-color : #343434; width: 980px; height: 35px; margin: auto;}
a.mainmenu {position: absolute; border-right: 1px solid #3c3a3a; margin: 3px 0 0 215px;}
a.mainmenu a{background: none; font: 15px tahoma; color: #fff; border-left: 1px solid #3c3a3a; text-decoration: none; padding: 4px 15px; float: left; text-align: center;}
a.mainmenu a:hover {background-color: #343434; color: #ccc;}

a.mainmenu-h {background: url(http://i78.servimg.com/u/f78/17/31/71/58/user_n10.png); width: 980px; height: 35px; margin: auto;}
a.mainmenu-h-scroll{background: #313131; width: 100%; border-bottom: 1px solid #02bbe3; opacity: 0.85; position:fixed; top:0; padding-top: 3px;}

SocialAcademy
Forumember

Male Posts : 141
Reputation : 10
Language : JavaScript, CSS, Html, JQuery, C#, C++, Php, Python
Location : Forumotion

http://www.socialacademy.biz

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 22nd 2014, 2:00 pm

@SocialAcademy wrote:hey you try this

Code:

a.mainmenu {background-color : #343434; width: 980px; height: 35px; margin: auto;}
a.mainmenu {position: absolute; border-right: 1px solid #3c3a3a; margin: 3px 0 0 215px;}
a.mainmenu a{background: none; font: 15px tahoma; color: #fff; border-left: 1px solid #3c3a3a; text-decoration: none; padding: 4px 15px; float: left; text-align: center;}
a.mainmenu a:hover {background-color: #343434; color: #ccc;}

a.mainmenu-h {background: url(http://i78.servimg.com/u/f78/17/31/71/58/user_n10.png); width: 980px; height: 35px; margin: auto;}
a.mainmenu-h-scroll{background: #313131; width: 100%; border-bottom: 1px solid #02bbe3; opacity: 0.85; position:fixed; top:0; padding-top: 3px;}

Doesn't work the navigation menu is all on the right

If you have another ideas.

For Pizza`s :
How can i change the color of text in Navigation menu ?
How can i make it bigger, because it`s not working if i make more px

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 22nd 2014, 3:25 pm

Hi Very Happy

Use this:

Code:
a.mainmenu {
  background-color: #176775 !important;
  padding: #14px;
  margin: #14px;
  border-right: 14px solid #176775;
  color: #FFF !important; /* Change the color here */
  font-size: #px; /* Change font size here */
}
a.mainmenu:hover {
  background-color: #000000 !important;
  padding: #12px;
  margin: #12px;
  border-right: #12px solid #176775;
  color: #FFFFFF !important; /* Change the color here */
  font-size: #px; /* Change font-size here */
  transition: 400ms;
}

Read the ones I put in /* Change... */ PLEASE. And afterwards, remove those message to prevent errors in the Stylesheet.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 22nd 2014, 3:34 pm

All Black

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 22nd 2014, 3:36 pm

Hi Very Happy

Remember about the /* Change... */ in the first post and use this:

Code:
a.mainmenu {
  background-color: #176775 !important;
  padding: #14px;
  margin: #14px;
  border-right: 14px solid #176775;
  color: #FFF !important; /* Change the color here */
  font-size: #px; /* Change font size here */
}
a.mainmenu:hover {
  background-color: #Color !important; /* Change this color to the one you want */
  padding: #12px;
  margin: #12px;
  border-right: #12px solid #176775;
  color: #FFFFFF !important; /* Change the color here */
  font-size: #px; /* Change font-size here */
  transition: 400ms;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 22nd 2014, 4:04 pm

That working but the font size still not work††:/

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 22nd 2014, 4:11 pm

Hi Very Happy

I'm not sure if it's the fact you declared such a high and outrageous value for #px for font (55px to be exact) or not that cancels out your original font code, but this code works fine for me:

Code:
a.mainmenu {
 †font-size: 18px !important;
}
a.mainmenu:hover {
 †font-size: 30px !important;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Matrixx on April 22nd 2014, 4:24 pm

Okay, Working. Thanks

Matrixx
Forumember

Male Posts : 48
Reputation : 1
Language : Bulgarian, English
Location : Bulgaria, Razgrad

http://matrix-serv.iftopic.com

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Pizza Boi on April 22nd 2014, 4:27 pm

Hi Very Happy

Lol, finally. The pizza's here! That'd be $2.99 Wink.

No problem~

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to change style of Navigation Menu

Post by Jophy on April 22nd 2014, 4:53 pm

Solved

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

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