Editing Auto Nav

Permalink
I am new to Concrete5 and trying to edit the auto nav on my site but am unable to change the font, size, position or colour! I have been trying to use 'edit' and 'design' and adding CSS commands but to no effect. Can anyone offer some clear, simple advice please?

 
s2d replied on at Permalink Reply
s2d
Applying a style to the entire block may sometimes not produce the result you want for something inside of it.

The best place to make permanent theme style changes is the main.css file in the root of your theme directory (/<concrete_folder>/themes/<theme_name>/main.css). That way, you can apply your style changes to the exact elements you need to.
lacaleratest5 replied on at Permalink Reply
Thanks Kate. I can see that i can edit the Nav colours by picking from the customise menu but not sure how to edit specific CSS. WOuld you know what code i would use to adjust the nab point size and positioning?
s2d replied on at Permalink Reply
s2d
Are you using one of the themes that C5 ships with, or some other theme?
lacaleratest5 replied on at Permalink Reply
Yes I am using a theme called Greek Yogurt.
jero replied on at Permalink Reply
jero
You might be better off copying the theme into a new folder in /themes and then installing that before making customisations. There's a chance that an upgrade may wipe out your changes.

For example, copy /concrete/themes/default to /themes/mytheme. Then go to dashboard->pages & themes and install then activate the theme.

With regard to the CSS issues, I strongly suggest you use Firefox with the Firebug addon installed to inspect the menu elements. It'll tell you what styles are being applied, and which lines in the css file are active. You can also change these temporarily to see what effect your changes will have before you actually edit the css file.

Happy Firebugging!
lacaleratest5 replied on at Permalink Reply 1 Attachment
Thanks Jero I'll give that a try. Someone did mention to me about Firefox and so I have just started using the Tools>web developer>inspect function but as I am not a programmer it is still confusing me somewhat. See attached screen grab of the navigation. can you advise what code I would use and where i would insert it in order adjust the navigation size and position? Many thanks. Tom
jero replied on at Permalink Reply
jero
Web developer tool is good, but Firebug is better for this sort of thing, IMHO. I use both on a daily basis.

Position is I think controlled by this rule:

div#main-container #header ul {
    float: right;
    list-style-type: none;
    margin-bottom: 0;
    margin-right: 45px;
    margin-top: 14px;
}
typography.css (line 149)


The important bits of that are the float:right which will push the menu over to the right, and the margin-right:45px

If you need to centre the menu, you should try adding
display:block;
text-align:center;

to that rule (and removing the float/margin)


The font size seems to be controlled by

div#main-container #header ul li a {
    color: #000000;
    padding: 10px;
    text-decoration: none;
}
typography.css (line 29)

Add a font-size rule and it'll get larger (or smaller)
ivorytux replied on at Permalink Reply
ivorytux
I wrestled with this same issue for several hours before arriving at this simple solution:

#header { text-align: center; }
ul.nav { display: inline-block; }

Hope this helps the next person!