Search bar overlapping nav items about bootscore

[crftwrk]

Hi Andrew,

please share a link to your site to check.

[pandanas69]

Https://Freetowork.co.nz

Thanks

[crftwrk]

Hi Andrew,

please check here the header documentation https://bootscore.me/documentation/header-php/ too.

Header uses fixed-top as described in #26. Search uses collapse component. In combination with header class the search cover the content. If you want to push content down instead of overlapping when opening the search-form, just remove fixed-top class.

You have this custom CSS on your site:

@media (min-width: 768px)
.searchform {
    max-width: 50% !important;
    float: right;
}

This will crash your search-form.

[pandanas69]

Hi,
Thanks for your help. I added that as the search form takes up full width on desktop. How do you mean, will crash?

[crftwrk]

It affects behavior of the collapse component. Collapse opens inside the parent div and is full-width. When you set the width of the searchform to 50% that looks a bit weird. If you want to make this different, you can use dropdown component instead of collapse https://getbootstrap.com/docs/5.1/components/dropdowns/.

Just an idea...

[pandanas69]

I see. Cool, thanks. Keep up the good work! Much appreciated.

Andrew

[pandanas69]

Sorry to bug you, I'm sure your busy but one more thing please before I close these 'issues' for the life of me I can't get the logo to just the right size before the nav spills over under it on mobile. I've tried resizing the .svg and adding css to no avail. I guess it's probably not a good idea to have small lettering in a logo but still..
I've tried padding:0;; margin:0; position:relative; any thoughts?
Thanks so much!

[crftwrk]

Origin .svg logo has a height of 27px to fit perfectly into the navbar. But you can use any size by sizing your logo or add some CSS.

.logo.md {
    height: 80px;
}

When you resize the logo, this will affect content as well which you have to fix with Bootstrap classes or custom CSS.

Theme uses the basic Bootstrap Navbar Component, but you can (you should) build everything you want of it by changing the HTML classes in header.php. A good example how to make a cool header with bootScore theme is this site.