How to add search box to navigation bar for Dazzling WordPress theme

Dazzling
1

Hi Aigars and Co,

Wondering how to add a search box (in Dazzling them) to navigation bar; one that will work well across different devices.

Thanks in advance,

WP: 4.2.2
Dazzling: current
Site: curlyafrodotcom

2

Hi Aigars and Co;

Any suggestions to how to add the search box to navigation bar in Dazzling?

3

Hi @4alex,

I hope you are well today and thank you for your question.

You can achieve this by using the following plugin and configuring it.

To display the search box vertically center align in the navigation menu, try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS


#menu-header-menu li.menu-item-type-search {
  margin-top: 17px;
}

Best Regards,
Movin

4

Hi Movin,

Thanks so much for the reply.

I tried the changes, though the search was not aligned (vertically) with the navigation bar. Is it possible to add a small search box/symbol similar to this forum?

Regards,

5

Hi @4alex,

Thank you for your reply.

I tried the changes, though the search was not aligned (vertically) with the navigation bar.

Could you please share your site URL where you are using it so that i can help you to align it properly.

Is it possible to add a small search box/symbol similar to this forum?

Please use the following plugin to achieve this.

Regards,
Movin

6

Thanks Movin for reply,

I added the plugin again, and here is my site: curlyafrodotcom

If you could help with the aligning that would be great. Is it possible to make the corners square (90 degree) and change the colour from red to something else? Is it also possible to have the height of the search button and search box the same and then those the same or relative to menu items? Also, is it possible to remove the search box in the footer menu?

Regards,
Alex

7

With respect to square corners, can this be applied to both the search button and search box?

8

Hi Alex,

You can achieve all of this by using the following CSS code the same way as described previously.


.navbar input#searchsubmit {
  padding: 3px 12px;
}
.navbar input#searchsubmit {
  padding: 3px 12px;
  margin-bottom: 2px;
  background-color: #65c400;
  border-color: #65c400;
}
.navbar input#searchsubmit, .navbar input#s {
  border-radius: 0;
}
#footer-area li.bop-nav-search {
  display: none;
}

Cheers,
Movin

9

Thanks Movin,

I implemented the above changes but the button and box are still vertically misaligned. Am I able to get the lower borders of box and button on level of lower border of menu items? Or is it possible to centre the box and button to the menu items?

Thanks,
Alex

10

Hi Alex,

I mistakenly forgot to add the code in my previous reply that vertically align the search box.

Please try using the following CSS code to align it.


.navbar .bop-nav-search {
  margin-top: 8px;
}

You can change the top margin value in the above code to get the lower borders of box and button on level of lower border of menu items or to centre the box and button to the menu items.

Cheers,
Movin

11

Thanks Movin,

Implemented changes and is much better (thank you!). At this point, I am having trouble with the following:

  1. removing the space between the search box (rectangle) and the search button (i.e. red box)

  2. aligning the search button with the search box [if I keep the alignment of the search box (rectangle) the same, how would I move the button to align with the box?]

I tried to manipulate the above codes, but the desired outcome still alludes me.

Thanks in advance,
Alex

12

Hi Alex,

1) removing the space between the search box (rectangle) and the search button (i.e. red box)

You can remove this space using the following CSS code.

.navbar input#s {
  float: left;
}
2) aligning the search button with the search box [if I keep the alignment of the search box (rectangle) the same, how would I move the button to align with the box?]

The search button displays aligned with the search box as shown in the attached screenshot so please tell me a bit more in detail what you want to align so that i can help you to align it.

Regards,
Movin

13

Thanks Movin,

The above works great for Moxilla and Chrome, but not for Internet Explorer as per screenshot.

Any suggestions?

Thanks in advance,

14

Guys, thank you very much for this valued thread, coincidentally it is exactly what I need for the website I’m currently developing at d-baseDOTdyndnsDOTbiz/bolus (note the DOTS). This is a dev server only, so line speed not optimal, please bear with it.

However, I have woocommerce installed too and as you can see on the site right now, the search box is getting in between the cart nav options. Any suggested way to deal with this?

Thank you very much,
Mario.

15

Hi Mario,

I hope you are well today.

To help to keep support threads separate could you please open a new thread for your question here https://colorlibsupport.com/c/dazzling/#new-post

You can also include reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Cheers,
Movin

16

Hi Alex,

Currently i don’t have IE browser so i couldn’t provide you the exact solution but you can try using the following CSS code and adjust the height value to display it properly on IE.

.navbar input#s {
  height: 28px;
}

Regards,
Movin

17

Apologies thank you, will do shortly.

Mario.

18

Thanks Movin,

Made changes and it worked (thank you!)

Alex

19

Hi Alex,

Awesome great to see you got that worked.

Please advise if you have more questions.

Have a fantastic day!

Cheers,
Movin

20

Hi Mario,

You are most welcome here :slight_smile:

Cheers,
Movin