[Support request] header – logo, social icons, search

[keiron]

Hi guys I am currently editing my header to include my logo, social media icons and a search bar. I have used the social media icons and search widget and have all elements inside the header area but i would really like to move them about to specific areas of the header. I do not see any options for this on generate pro and am wondering if it would be better to create a header from scratch in elementor pro. I am aware that GP pro is a well coded theme and it would be better to manage it using the in built capabilities but i cant work out how to do this in GP pro.

[Leo]

Hi there,

Something like this might help:
https://docs.generatepress.com/article/split-header-three-sections/
https://docs.generatepress.com/article/creating-columns/

[keiron]

Thank you for the feedback! I see to insert widgets in the various sections you must use another plugin to add shortcode. I am wondering if it would be better just to create the header with elementor? I also do not see options for editing the search widget?

[Leo]

I always prefer to not use page builder but it’s up to you 🙂

What are you wanting to edit?

[keiron]

I am trying to align the search box centred at the top with the navigation burger icon on the left and social media icons on the right.

like so:
☰ |this is the search box | (F) (G+) (Pi) (Ins)

( Website Logo underneath)

Ideally when the website is then viewed on mobile this layout will remain, with the social icons probably needing to be in a drop down menu as well. http://ohsheglows.com/ mobile website has an interesting way of showing the drop down menu with the social media icons which could be an ideal option.

At the moment I Have managed to get the social media icons in the navigation bar floating right but i haven’t been able to sort the navigation burger icon or get a search box in the centre. I am aware you can enable search through the primary navigation settings but this just adds a search symbol as opposed to a box.

[Leo]

You might be able to try this method here using the plugin and secondary navigation:
https://generatepress.com/forums/topic/search-box-in-secondary-navigation/#post-278969

Then this method here so it doesn’t turn into toggle for mobile:
https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

A link to your site might help so I’m not purely guessing your layout 🙂

[keiron]

Im guessing there is no way of modifying the search option which comes with the navigation bar using some css? its frustrating because the search box is there, i just need it to be a box not the symbol and block the on-click transitions assigned to it.

I See that in the CSS editor there are lots of “main nav search class”…. I am wondering if these is css along the lines of (Below) for removing the search icon somehow to achieve a search box instead of the symbol? The CSS in the editor is quite easy to understand what is going on but I am not sure how to overide all the .Active, visible and transition settings to make the search bar just appear as normal… another issue may be the lack of a “placeholder” input :/

.navigation-search {
Visibility: Visible
display: block;
width: 100;
height: 10;
}
ohh i didn’t think i could post a link? i have tried to view the website when i am not logged in and it doesnt show!

Thanks for the help!

[Leo]

This method allows you insert the default search box in the navigation:
https://wordpress.org/support/topic/generatepress-search-how-to-change-visual-display/

[keiron]

Thanks, this looks ideal! Tom talks about adding functions he provides, where would i add these functions? also do you have any idea how to make the menua drop down with hamburger icon in the desktop nav

regards.

[Leo]

Using one of the methods here: https://docs.generatepress.com/article/adding-php/

Not sure what you mean with the second question?

If it’s unrelated to this. Please open a new topic.

[keiron]

Cheers, what would be the negatives of using the top bar with naviagtion, search and social media widgets as opposed to using the primary nav and adding the search through adding php?

[Leo]

Uhh I think it’s personal preference mostly. Give it a shot and see if you run into any issues.

[Author]

Posts