Want to add social media icons to my header

Hi I want to add some social media icons to my header bar that are present in the top right hand corner (where the red box is) when I scroll down the page (the same way the Navigation menu/my logo is). My site is bestimagingsolutions.com . Can someone guide me?

Hello there,

To achieve it, you can follow this documentation:

https://docs.athemes.com/article/243-how-to-add-a-social-menu-in-the-header

Regards,
Kharis

Hi
I would like to do something similar, but having tried the information in the article, I could only add a text item to the menu rather than the icon (e.g the word Twitter rather than getting the bird symbol).

I also would like a little search icon there too and want to get my logo and menu items to change colour when I scroll (all similar to this idea: https://www.dlplanning.ie/). My test site is: http://www.herrflynn.com/wordpress). The background changes/becomes a colour (I’ve seen the code to make this more solid too rather than transparent) but I want the menu items and logo to change too.

Thanks
Tommy

Hello Tommy,

To add social profiles icons on the end of main menu items, try this solution:

To add a search button, try this:

https://wordpress.org/support/topic/search-icon-in-menu/

To have solid color on header bar upon scrolling, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header.float-header {
      background-color: rgba(40,42,116,1);
    }

Regards,
Kharis

Hi Kharis

Thank you so much for taking the time and providing those links. I got the header solid, which is great. I have been reading up on the icons and search and it looks like an option.

I still haven’t figured how to get the menu items and logo to change colour though once you scroll the page.

I neglected to say that I am using Elementor Pro for editing too as I read that Sydney Pro was ideal for it. I was doing some more ‘trying out’ of the items/elements and discovered their Nav Menu widget (I put a test menu in way down the following page: http://herrflynn.com/wordpress/sample-page/).

It has nearly everything I need I think, especially since it so easy to edit. Is there any way of editing my present header in Elementor so that I could get the navbar look that I want, without having to go into CSS? Or is there a way to design it in Elementor and then copying the code into the CSS file?

Sorry for all the questions! I am really loving the theme and Elementor, although I get sucked in for hours once I start! :smile:

Thank you again!

Tommy

Hello Tommy,

Sydney’s main navigation menu has its own unique styles and seperated from Elementor. In order to create one inside elementor page, you would use additional add-on, which is outlined in this post:

Regards,
Kharis

Thanks again for replying. Very much appreciated! Great minds think alike! I had viewed the video

I have that add -on as part of Elementor Pro but is there a way of replacing the Sydney Pro main navigation menu with the one I develop in the add-on? I thought about the embed option but don’t see a way of doing that with the header.

I still have to have a search option and also the Twitter and FB icon links in the header, and also that it is ‘sticky’.

Thanks again.

Tommy

Hi again. As mentioned, I have used the Elementor add-on to make a new menu but can’t find a way to replace the Sydney Pro main navigation menu with this new menu (http://herrflynn.com/wordpress/about-us/branches/dublin/ has both the present main menu and also the sample Elementor menu in the main part of the page).
Thanks again for all the help so far.
Regards
Tommy

Hi again

Just to say I got the menu working nearly like I wanted to - thank you so much for your help. Have a look if you have a chance! http://herrflynn.com/wordpress/ The search knocks it out slightly when clicked (strangely the cursor doesn’t change to a little hand for some reason when moused over), but I think I can live with that - assume it is to do with the width of the menu.

Now off to figure out why my News page (Blog) pagination doesn’t work (I reduced the number of posts to 4, and when I click on the ‘2’ at the end (to signify the next page) and error comes up that the page cannot be found!

Anyway, thank you so much again. Very much appreciated.

Regards

Tommy

Try flushing your site’s permalink by going to Dashboard > Settings > Permalinks; and just hit the save button.

Regards,
Kharis

Thanks for getting back to me. Much appreciated.
I ended up changing the slug to ‘new’ and leaving the page as ‘news’ as I read somewhere that having the same name for both could cause issues. It is working now and I am delighted.
Nearly finished the site now!

Awesome!

Glad to hear all sorted out. Can I close this topic? Please open a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Yes, it can be closed.

Many thanks again!

Tommy