[Resolved] Where is the settings defined for the header footer layout.

[Author]

Posts

[henrikG]

When you look at the refsite for the classifieds site using layouts you will see that that the site logo and menu is configured in the layout below the header image. (see screenshot) But when you look at the site, the logo and the menu is pushed above the header image.

But I can't find a setting for that anywhere in the layout, nor in the CSS.

It may be my non experience in bootstrap, but I would like to know which feature / style /setting / javascript that makes the logo and menu position it selfs on top of the header image (like a negative css margin)

I would like to understand how the logo and menu gets pushed up over the header image, what are my options for controlling this behaviour.

[Beda]

Thank you for contacting us here in the Support Forum

Since both (Image and Logo/Menu) are part of the header, it is expected that they "overlay" each other.

As usual, a Header image is a kind of background to your Header section.

If you would need to push the menu down (below your Header Image), you would either need to move the Menu to your Body Content, or push with CSS Attributes, but I suspect this would break the layout on smaller screens specifically.

I would need access to your site to check that closer, but you could start by looking in your header.php file to check where and how the Header and Menu are called and rendered.

You could then change the HTML structure, to create a second DIV with proper CSS classes, to move the Menu and Logo to a lower place (below the header image)

You could also create a new row, and include the Menu And Logo in this news row.
You cold then delete the "old" Header Navigation" Row, since not used anymore.

Looking at the default Classifieds Site, I think you should be able to "push" down the whole header-nav container with this CSS.

.header-nav {
    position: relative;
    margin-top: 130px;

Please let me know if you have further questions regarding the issue mentioned in this Thread
and let me know if the above solution works for you, I look forward to your reply!

Thank you

[henrikG]

Hi beda.s

I clicked the row, and the CSS and noticed the header classes.

So adding these classes to the row, makes the navigation section overlap the header image.

Thought there was some sort of setting some where in the row where you define if it belongs to a header.

[Beda]

Thanks for the Details

There is no other setting in Layouts to let you define if a certain row is part of the header (as example)

You can read more about Layouts Styling here:
https://toolset.com/documentation/user-guides/using-html-css-style-layout-cells/
https://toolset.com/documentation/user-guides/learn-how-rows-can-displayed-different-ways/

Please let me know if you have further questions regarding the issue mentioned in this Thread

Thank you

[henrikG]

Thanks