Archived

This topic is now archived and is closed to further replies.

  • 0

Header and nav bar customizations, help


Question

Posted · Report post

post-45335-0-70043800-1360579670_thumb.pHi everyone,

 

Lets see if you can help me with this customizations, I´ve an header done, where I´d like to do the following customizations:

 

- To include the social media buttons inside the nav bar

- To include an image on the header apart from the main logo

- To change the nav bar font 

- To change one of the links colour (from the nav bar)

 

I´ve attached an image with the current header and the desired design.

 

The website is: www.ouyapro.com and the password 0075

 

Let me know if this is possible, any help will be grateful!.

 

Thanks in advance :)

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

Hi,

 

1 & 2. In order to add social media icons to your NavBar you will require the help of a hook. I recommend you install the free plugin called ActionMap from the PageLines store.

 

3. The font of the navigation can be changed in the Typography settings.

 

4. To change one of the links, you will need to target that menu item (all menu items are given unique ids) and use custom CSS.

 

I have provided you with a link to our custom CSS documentation which should assist you.

 

If you're not comfortable with custom CSS or using hooks, I would suggest contacting one of our Pros, who will be able to assist you.

 

http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny,

 

I´ve installed and activated Action Map, but I cannot see any change when Im logged... what should I do to put the social media buttons inside the nav bar?.

 

About the custom ID of the menu.. where can I see that? and how can I modifify the colour, typo of it?.

 

Sorry if they´re noob questions,

Thanks

Share this post


Link to post
Share on other sites

Posted · Report post

The ActionMap is a plugin that assist you in finding the correct location, it doesn't do anything other than that. Once you have find the correct hook location using Action map, you use this to create your hook.

 

In your code, you will need to most likely use this:

http://codex.wordpress.org/Function_Reference/is_user_logged_in

 

In order to find your menu's ID to style that particular menu, you need to use either Firebug or your browsers built-in web dev tools, see my image below as an example.

 

http://d.pr/i/v8Fq


You can use the ID, in your code for example,

 

.menu-item-509 a {
background: red;
color: white;
} 

Share this post


Link to post
Share on other sites