Hi maxspanoghe,

What method did you use to change the padding of the navigation? Did you edit the area design?

If you want to make layout changes that are sitewide, you can add CSS to the site Custom CSS.
Toolbar > Page Settings (gear icon) > Design > Theme > Customize > Custom CSS gear icon button

Another option is to change the CSS of the theme itself. This involves editing files on your server. The Elemental theme is part of the concrete5 "core" installation. This means that any changes to the theme will be overwritten when concrete5 is updated. To prevent changes from being overwritten, it is recommended to use a non-core clone of Elemental called "Cloneamental".
https://www.concrete5.org/marketplace/themes/cloneamental...

I am not afraid of code so editing files on the server in both css/html/js and PHP is doable for me. Not an experience programmer but I can understand most of it.

Thanks for mentioning the clone of elemental, I used a guide I found on the forums to copy the core Elemental to your own version of it in the Application map. I think I did that correctly so that won't be a problem! thanks for the mention though :)

I changed the layout by using the area design indeed and then used the kinda handy interface way of changing the paddings and margins.

How could I change the layout for example for the NAV block in the header sitewide area? I'll try to go where you mentioned to go, if I need more info i'll try to contact you again.

Thanks for the help!

Cheers!

UPDATE:

I found the custom CSS button. My question is though, how can I adress the right part?
which one should I call so to say?

Kind regards,

Max

@maxspanoghe

I am afraid I don't understand the question, please rephrase.

Hi,
I have the same issue...
I'm using Cloneamental with C5 version 8.4.4 and am trying to find a way to change the size and positions of the SiteWide Header and Sitewide Header Navigation.

I have already updated some of the Cloneamental files to change default fonts and to make the header static so that the remainder of the page scrolls beneath it.

Which files would I need to change to achieve changing the size and position of the header elements please? I have a development background albeit not in web design so not concerned about editing files.

Thank you for your help.

If you want to change the header layout globally, you have to edit the header.php file in your theme, e.g.

\application\themes\YOUR-THEME-NAME\elements\header.php

To edit CSS of the header globally, you have to change another header.less in

\application\themes\YOUR-THEME-NAME\css\build\header.less

Thank you linuxoid, much appreciated.

Are the changes that I would need to make fairly obvious? Like changing existing values for positioning etc?

In addition, is it possible to add a font to the Ckeditor from an external source please so that the font is available from the drop list? I have included the Google font 'Great Vibes' and have changed the default for the header to this font which works, but would be great of this font could be available from the Ckeditor font drop list if possible?

Thank you again for your help.

Yes, editing the header files is very straightforward, no difference to any other view or css files, it's all the same php/html/css. As long as you're familiar with the Bootstrap grid.

I haven't added fonts to the editor. But check this out:

https://documentation.concrete5.org/tutorials/adding-ckeditor-custom...

Thanks again....
I had no idea what a Bootstrap grid is until I just Googled it lol...However, I can see that it is the process for references rows/columns within containers. I'll check out the link regarding adding fonts and will look into makes changes to the files you mentioned to move the containers n the header as I need them to be.

Thank you again for your help, much appreciated.

Think of the Bootstrap grid as a 12 column wide sheet for multiple screens. That is either 1x12 or 2x6 or 3x4 or 4x3 or 6x2 or 12x1. And a combination of each for each target screen size. That is you could fit 3x columns on a large screen <div class="col-lg-4"> or 2x columns on a small screen <div class="col-sm-6"> or 1x column on a mobile <div class="col-xs-12">.

They have excellent documentation:

https://getbootstrap.com/docs/3.4/css/#grid...

Note: concrete5 uses Bootstrap v3, not v4!

I can see how to change options in the 'header.less' file for Padding etc but these only seem to control the positioning of elements within the block containers...I cannot seem to reposition the actual block containers?

You design the grid in

\application\themes\YOUR-THEME-NAME\elements\header.php

and design its style in

\application\themes\YOUR-THEME-NAME\css\build\header.less

Ah, thank you Linuxoid.