How to create Header & Sub Header?

How can I create a Header with my blog name with a smaller Sub Header under it with my pages?

When scrolling, can both appear at the top or just the Sub Header?

Thanks

Hi there,

You will have to do some customization through the child theme as these are features not available out of the box in the theme which goes beyond the scope of our support.

But to get you started, you can override the file _navbar.php that is in /framework/legacy/cranium/headers/views/global/. This is the file that the header uses so you can add the code for the subheader here.

Then you can add some custom Javascript code to make the header scroll with the subheader.

Hope this helps.

Where can I find /framework/legacy/cranium/headers/views/global/?

What do I override _navbar.php with?

What custom Javascript code do I use & where do I put it?

Thanks, sorry I am very tech-illiterate… :frowning:

Hi,

We can try another approach.

To add sub header, you can add the code below in your child theme’s functions.php file.

// Add subheader
function add_myslider() { ?>
<div class="subheader">
       <div class="subheader-container">
                 My Subheader
       </div>
</div>

<?php
}
add_action( 'x_before_view_global__slider-below', 'add_myslider', 10 );

Then add this in Theme Options > CSS

.subheader {
     display:block;
     width:100%;
     clear:both;
     position:fixed;
     top:60px;
     padding:10px 0;
     text-align:center;
}

Hope that helps

That seems to have worked, thanks!

Now how do I edit the subheader? I would like to move my menu there.

Actually I’m not sure if that’s worked… please take a look… https://diytravelhq.com

Hi There,

The Subheader is there, but it’s behind the slider. You need to remove the position: fixed; on CSS code given for it to show.

Just a thought, are you after this kind of layout?


Because you can achieve that under Theme Options > Header > Logo and Navigation LAYOUT set to Stacked.

Hope it helps,
Cheers!

That’s exactly what I was after, thank you so much!

How did you get it white? This is how it shows for me and I can’t see where to change the header colour:

Also, how can I make the top bar larger? As you can see the font & icons are tiny. How do I take away the G+ icon & add Instagram?

And what does turning on Breadcrumbs do? Thanks

I worked out how to change the icons so don’t worry about that question :slight_smile:

Hi there,

Kindly do not ask additional questions in one thread as it gets too crowded and we can not serve you as you deserve. Kindly open up separate threads for the new questions and only reply to this thread to follow up the answer to the current question.

We have a knowledge base listing which I think will be helpful if you read the information there first:

You are using the Ethos stack so go to X > Launch > Options > Ethos to find out which options you have at hand regarding the color of the header. For more information:

Also for additional options for the header you can go to X > Launch > Options > Header

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.