Plain Yoghurt theme - removing header nav space

Permalink 1 user found helpful
Hi there,
this may be a simple question, but how do remove the empty space where the header nav part of my site would normally be, at the moment it is 'dead' space for me -www.www.australia-france-exchange.com... I would like the logo across the top to be at the top of the page

Thankyou!

View Replies:
irussell replied on at Permalink Reply
I am in need of this answer as well. I am currently having this problem. I removed the header code, replaced it with a jpeg logo and now I would like to push the jpeg (or, logo) to the top of the webpage and put in a purchased Concrete5 superfish drop-down menu right underneath it.

Please advise.

thanks
chunksmurray replied on at Permalink Reply
chunksmurray
You'll need to change a couple of things.

Firstly, in the theme's header.php (in the elements folder), remove the line (around line 50)
<div class="divider"></div>
This will remove the dotted line from above your logo.

Then in main.css (around line 30) change the following:
#page #header #header-area{margin-top: 10px; margin-bottom: 10px }
to
#page #header #header-area{margin-bottom: 10px }
This will remove the top margin and push the logo right to the top of the page.

If you haven't done so, probably a good idea to copy the Plain Yoghurt (default) folder from the /concrete/themes directory and paste it into /themes. This way if you update concrete5 you won't loose your changes.

P.S - ignore the <?php and ?>, they aren't in the lines you need to change.
Ricalsin replied on at Permalink Reply
Ricalsin
For those stumbling on this thread:

Trying to understand how to "change the look" of C5 may appear difficult at first glance - because things aren't where you'd expect. That is due to the fact that C5 is built to be changed. Start with grasping these initial points:

1. The C5 folder structure and how to use it to your advantage. (And, if you want to go deeper, how the tree structure naming conventions play an intricate role in properly calling core functions - though that scope is much beyond the OP's question.)

2. Understand that Page Types are the initial "wireframe" of a view's layout. The word "Theme" describes the (css) display of these (html structured) page types, which will then hold your installed content through the use of blocks. And by having more than one Page Type you can add new pages and quickly configure them for the content you are wanting to add.

The Documents > Developer's Section has some great info on these subjects and you can search these terms out.

Along with chunksmurray's suggestion, you'll also need to look into the main.css file and change the #headerSpacer height property. But before you waste too much time, invest in understanding the C5 strategy - it will be time-well spent as C5 already knew you were coming to "make a change", and they've got a playbook for you that you should definitely know about.

Good Luck, and welcome to a great community.
EmeraldStar replied on at Permalink Reply
EmeraldStar
Great reply ChunksMurray, it helped me (random reader of the thread) Thank you.
cssninja replied on at Permalink Reply
cssninja
Go to your dashboard and go to "Pages and Themes"
Select the "Customize" button of the theme your using and click: Add Your CSS.

In blank textarea paste this code:
#page .divider {display:none;}
#page #header #header-area{margin:0 0 10px 0; border-bottom:1px dotted black;}
#page #header ul.nav-header{ list-style:none; margin:10px; padding:0px; width:auto; z-index:2; overflow:visible; float:none;}
JRick replied on at Permalink Reply
JRick
Ok, maybe I am missing something but in an attempt to remove all that extra white space on the default "plain yogurt" theme I have tried everybody's suggested methods in this thread seperatatly or and in conjuction with one another and have still not gotten that white space to reduce. Has anybody figured this out ?

Thanks,

SecretSquirrel
ThemeGoodness replied on at Permalink Reply
ThemeGoodness
In the css file comment out or change the height of
#page #headerSpacer {
height: 64px;
}

this spacer is causing you the issue I believe.


Stephanie
JRick replied on at Permalink Reply
JRick
Stephanie,

Thanks much.. I figured it out already and just hadn't gotten the chance to answer my own question. Found out I must be having some conflicting issues on my sandbox site (maybe one to many themes installed on it) and when I changed the headerSpacer height it didn't do anything. I tried again on my alternate sandbox that is all fresh installs of everything and it worked fine there.

Thanks for the help though.

Secret Squirrel
HOBOcs replied on at Permalink Reply
HOBOcs
Thanks for posting the solution here, Stephanie/Cssninja.
Just came across this and this was what I was looking for.