I came across the how-to-add-search-box-to-navigation-bar/#post-24861 post which was most helpful and I too require assistance on my site when placing the “bop search box” in the navigation. The site in question is d-baseDOTdyndnsDOTbiz/bolus (note the DOTS). Please bear with my dev server, line speed not the best.
You’ll see that the search box is getting mixed in with the woocommerce cart nav options. What would a suitable way be to sort this out? I would like the box either on the very end of the navbar or even above the nav section if possible (due to the nav bar beign filled up). Anything that would make it look good.
You Movin… are a king! It looks good! Always great support from Colorlib team and you guys deserve success. I really appreciate it.
If I may ask another quick question, which I’m sure you have some CSS wizardry to supply. The client asked if the whole nav bar section (dark background container) can remain fixed to the top of the screen when you scroll down the page. I assume the position:fixed; css would apply somehow. If you don’t mind killing two birds with one stone in this thread, I would appreciate it, otherwise I’ll open a new thread if necessary.
You can try making the whole nav bar section (dark background container) remain fixed to the top of the screen when you scroll down the page by using the following CSS code.
My client asked that the search box be placed instead, inline with the nav list items, so I attempted to do it with css myself and got it right on when the browser screen is desktop size. The mobile side of it is giving me problems (when I reduce the screen size of browser).
You’ll see that the shopping cart item intereferes with the search box, and also when the screen is minimized to like tablet size (before the nav changes to the button dropdown), it highlights the whole nav section on hover.
Also when it is phone size (the nav dropdown button), there is also a problem.
I have looked at the @media query css statement and it says max-width 767px. I have also added some of my own custom css trying to resolve this, which I can post here if required.
I’m not sure how to tackle this and appreciate any advice you can give.
Another thing, which I believe is a quick fix is, after I enabled the child theme, there is a class that is creating like a box shadow around everything. In some containers it’s fine but look odd in others. For example, the slider on the front page, you can see the box shadow below it. How do I target the class, or even a specific class such as the box display below the slider?
You’ll see that the shopping cart item intereferes with the search box, and also when the screen is minimized to like tablet size (before the nav changes to the button dropdown), it highlights the whole nav section on hover.
Try using the following CSS code to resolve these issues.
@media (max-width: 1000px) {
#menu-main li.menu-item-type-search,
body .pull-right {
float: left !important;
}
}
@media (max-width: 768px) {
body .pull-right {
margin-top: 15px;
clear: both !important;
}
}
Also when it is phone size (the nav dropdown button), there is also a problem.
What’s the problem?
Another thing, which I believe is a quick fix is, after I enabled the child theme, there is a class that is creating like a box shadow around everything. In some containers it’s fine but look odd in others. For example, the slider on the front page, you can see the box shadow below it. How do I target the class, or even a specific class such as the box display below the slider?
You can remove the shadow displayed below the slider using the following CSS code.
