Forums

Changing the length of the autonav in elemental theme

Permalink
Hello,

I would like to change the length of the elemental theme for the autonav. I would like to make the site title area and the search area smaller in the header and the navigation longer. I assumed I have to change something in the /concrete/themes/elemental/css/build/header.less but even though I tried some values, I am not sure what I am doing so I would appreciate if someone knows how to do it.

Thanks.
 
ramonleenders replied on at Permalink Best Answer Reply
ramonleenders
If you go to /concrete/themes/elemental/elements/header.php, you will see this code more or less at the bottom of the file

<div class="col-sm-4 col-xs-6">
                <?php
                $a = new GlobalArea('Header Site Title');
                $a->display();
                ?>
            </div>
            <div class="<?php if ($displayThirdColumn) { ?>col-sm-5 col-xs-6<?php } else { ?>col-sm-8 col-xs-6<?php } ?>">
                <?php
                $a = new GlobalArea('Header Navigation');
                $a->display();
                ?>
            </div>
            <?php if ($displayThirdColumn) { ?>
                <div class="col-sm-3 col-xs-12"><?php $as->display(); ?></div>
            <?php } ?>


Classes like "col-sm-4 col-xs-6" will build your columns. This is the Bootstrap way of telling how wide a column may be for each device type (sm = small, xs = extra small). You can see an example of Bootstrap's grid here: https://getbootstrap.com/examples/grid/...