Columns in header

Hi danborjesson,

Thanks for using our theme. If you’re going to modify the header, it would be best to copy the header.php from the parent theme then paste it on the child theme. For the entry title, please check first which template you are using since there are a variety of templates on the theme https://prntscr.com/o5tmi8. Then cut this line of code https://prntscr.com/o5tmuw and add it on the header.php on the child theme.

Please let me know your feedback if this solves your issue. Thanks.

Thank you so much @afterimagedesigns this was really good help!

I now have the entry-title in the header, and my next question is: Is it possible to put the website title in one column, the entry-title in another, and the menu in a third column, that follows my grid on the page?

I have tried to add like <div class”col-X> to the header, but it doesn’t work as I want, any suggestions?

/ D

Hi @danborjesson,

Can you please elaborate more about your issue? I think creating a wireframe would help me understand what you want for the header.

Please let me know your feedback. Thanks.

Maybe this is not a theme issue, but still asking.

I have created a column system with <div class=”col-md-2″><div class=”col-md-4″>, <div class=”col-md-4″> and <div class=”col-md-2″> where I spread out my content.

And I want my header to follow the same columns(“grid”), so I tried to put the site title in the first column, the entry title in the second and the the menu in the third (and the fourth is just empty).

But the problem is that the nav-toggle collapse even in full screen mode, and on the mobile screen (because I have the .container width to 100%) all the columns in the header becomes full width and in a list instead of lined up in a row.

Can’t find a way around this!

Thanks again!!

/D

Hi @danborjesson,

Is this what you want from the header https://prntscr.com/o7afmu? If this is what you want, kindly follow this HTML arrangement https://prntscr.com/o7afxt. As for the mobile, if you can elaborate it more I can help you with it. Thanks.

Thanks @afterimagedesigns for still replying!

If I put the navbar in a column like I did with all of the my other things in the header it becomes a hamburger-toggle right away, it breaks.

I wonder if I can change `
<nav class=”navbar navbar-expand-xl p-0″>` to prevent that!

Cheers!

Hi @danborjesson,

If you’re using a child theme, feel free to modify the navbar class. You can use navbar-expand-xl class to prevent that.

Please let me know if this solves your issue. Thanks.

@afterimagedesigns I’m sorry for being unclear.

But if I wrap the nav-bar in a div col, it becomes a hamburger toggle even in desktop size. Because the width gets to small. I want to prevent that so if I is on my site at my computer it get the normal menu with links, and when I switch to mobile I want the hamburger.

I’m doing this in a child theme. And I can’t find a proper way to solve this. Tried many combinations..

Cheers / D

Hi @danborjesson,

Sorry for the delay. You can manipulate the hamburger toggle using custom CSS since the classes have their own default styling. You could overwrite and limit it to specific media screen size. Be sure to add the CSS on the child theme so that when the theme updates it will not remove your settings.

Please let me know if this solves your issue. Thanks.