Header and nav bar customizations, help

5 posts in this topic

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



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.



Share this post

Link to post
Share on other sites

Ok thanks! 

Share this post

Link to post
Share on other sites

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,


Share this post

Link to post
Share on other sites

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:



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.



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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • CSS Hero question
      By janpeeters+
      Hi all,
      I was totally excited to find out about 'CSS Hero' (http://www.csshero.org) I read about it in the compatible plugins section of the PL5 docs (http://www.pagelines.com/resources/compatible-plugins) For me it's a great way to more easily customize my sites because I'm not a CSS pro.
      I'm wondering about one thing though… Does anyone know if using this will result in a heavy penalty on page loading speeds? Would love to start using it but only if it doesn't cost too much in terms of speed.
      Thanks, Jan
    • Modal Popup Background
      By abuzzelli+
      I need the modal popup background to be solid and I can't get the css to work. Not sure what to do. Here's the page: http://bellissimoplasticsurgery.com/breast-augmentation-test-page/
    • Remove or reduce margin (or padding) in header
      By richardjacruz+
      I'm building a site at:
      and I followed the instructions on building a "branding" area in the header:
      But, if you see the image I've attached, you'll see that there's a lot of space between the nav and the slider. Is this something I need to control with CSS in the Custom code section, or is there something else I can do that's part of the header section?

      Actually, what would also be nice is if I could put a divider line there... like an orange or a light gray.
    • Header formatting
      By richardjacruz+
      I saw this website build with PageLines DMS:
      I want to have a header that's VERY similar. However, with the fixed area, I'm struggling with how to do that. 
      I want to have a "super menu" under one of the tabs, and drop downs for others, a larger logo to the left like this, a search all the way to the right, and a call-to-action at the top like we see with "Donate" (I want "Request a Quote").
      What area (fixed or header) is best to use for this, and, within that area, what are the best sections to place?
    • Missing Header Region HELP!!!
      By 21thirteen
      We're using DMS2 to create the site http://particlesplus.com.
      The latest versions of DMS2 and WP are installed.
      We cloned the site using ManageWP and worked on it on our development server online, then cloned it back to particlesplus.com. (We've done this before with no problem).
      The Header region is now missing.
      Strangely enough, it can be seen in Chrome if you are logged in to wp-admin, both in preview mode and not, but if you log out, or look at the site in any other browser, the Header region is missing (it has a Media Box in it with links to the Chinese and Japanese versions of the site).
      Even more strange, I decided to try to disable and then re-enable the Header region in Site Settings/Advanced. The Header region was not disabled. I checked the disable box and refreshed the page, then when i tried to uncheck it, every time I refreshed it would be checked again. I finally managed to uncheck it after 6 or 8 tries. The same thing is going on with the Enable Debug checkbox. I checked it and I can't uncheck it now, but when I click on the "Click here" link for Debug Info, it says "WordPress Debug Disabled".
      I've attached screenshots.
      The client is understandably upset. Help would be GREATLY appreciated!
      Thank you,
      Perry Yeldham
      21Thirteen Design