Page 1 of 1

NAVIGATION BAR (Solved)

Posted: Sat May 25, 2013 4:24 am
by cart builder
I have two questions :

1. How do I change the text size of the categories in the navigation bar ?

2. Is it possible to remove the navigation bar (background) whilst still retaining the text ?

Thank you!

Re: NAVIGATION BAR

Posted: Sat May 25, 2013 5:13 am
by ShaneTFletcher
First answer - Yes, change the stylesheet div -

Code: Select all

#menu > ul > li ul > li > a { text-decoration: none; padding: 4px; color: #FFFFFF; display: block; white-space: nowrap; min-width: 120px; }
Add a font-size: 12px; or whatever and this will increase font size when a drop down menu of your category.

Second answer - The background of the menu is again within the stylesheet, search for the very first div of the main, remove the background colour and such. This will remove background but keeps the text in order.

I would recommend you trying out some tests on the stylesheet on a none-default theme.

Re: NAVIGATION BAR

Posted: Sat May 25, 2013 7:10 am
by cart builder
Thanks for the quick reply . I changed the 4px to 15px....and it simply increased the space between the options in the drop down menu ! Its just the font size of the top categories in the top Nav. Bar I need to change.

As I'm a total newbie, I'm afraid I don't understand what you mean by:

"search for the very first div of the main, remove the background colour and such. This will remove background but keeps the text in order".

Could you possibly provide the exact wording in the stylesheet (as in your first answer please).

Many thanks.

Re: NAVIGATION BAR

Posted: Sat May 25, 2013 1:06 pm
by Cleo
He said:
Add a font-size: 12px; or whatever and this will increase font size when a drop down menu of your category.
And you said:
I changed the 4px to 15px
the 4px is the padding (space)

Your other question: he said:
search for the very first div of the main

Code: Select all

/* menu */
#menu {
	background: #585858;
	border-bottom: 1px solid #000000;
	height: 37px;
	margin-bottom: 15px;
this is the 1st div of your main menu, remove: background: #585858;

Re: NAVIGATION BAR

Posted: Sat May 25, 2013 6:03 pm
by cart builder
Thanks Cleo - I've successfully managed to remove the colour background.

Only problem now is I don't know how to "add a font-size" in order to change the Nav. bar text size.

Also removing the Nav. bar has left white text which I will need to change to a different colour ! Any help appreciated.

Re: NAVIGATION BAR

Posted: Sat May 25, 2013 6:14 pm
by Cleo
Just look in your stylesheet and you will see something similar to this:

Code: Select all

color: #636E75;
	font: Verdana;
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 32px;
	font-weight: normal;
	text-shadow: 
you just have to copy some of those codes (not mine the ones in your stylesheet)

Create a copy of your stylesheet to make test and save it somewhere else to use it, that way if you do something wrong you can always put your original file back!

If you are satisfied with the result then replace the original!

Good luck

Cleo

Re: NAVIGATION BAR

Posted: Sat May 25, 2013 6:51 pm
by cart builder
Thanks Cleo.

I've followed your advice and I can indeed change the category heading colour & font size BUT not the Nav. bar heading font colour & size - which I am trying to change. But at least it's good to know !

As the Nav. bar text colour is white - I'm thinking possibly I may need to change one of the FFFFFF (html colour code white) entries in the stylesheet ?

That would then leave the issue of font size - which will probably be in the same vicinity of the relevant FFFFFF entry.

Again, any further help really appreciated.

Re: NAVIGATION BAR - Solved

Posted: Sat May 25, 2013 10:30 pm
by cart builder
After a bit of messing around the stylesheet, problem now solved.

To change the Nav. bar text & colour :

#menu > ul > li > a {
font-size: 13px; (change for text size)
color: #FFF; (change for text colour)
line-height: 14px;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
margin-bottom: 5px;
z-index: 6;
position: relative;

Re: NAVIGATION BAR

Posted: Sun May 26, 2013 5:24 am
by Cleo
Glad you got it solved!

It's the best way to learn how to do things, that's what I always do because I know nothing about coding/programming but I like to try/learn so I search the forum - try - and then ask!

If you would like to learn more check this thread: http://stackoverflow.com/questions/1347 ... ncart-guru

If your problem is solved edit your 1st post and add Solved to the title which can help others later!

Cleo

Re: NAVIGATION BAR

Posted: Sun May 26, 2013 7:25 am
by cart builder
Thanks for the link....it's very useful for a complete beginner like myself, I'll certainly be studying it later.

Thanks also for reminding me to edit the first post !