• 0
Sign in to follow this  
Followers 0

Adding svg icons to my navigation bar - how?

Question

Posted · Report post

Hi all, How do I go about adding svg icons to my navigation bar? Essentially, I would like to have icons for the navigation bar which is visible here: http://www.ajhairport.com/travel/ (The navigation bar has seven tabs. I would like each icon to be beside its navigation/page title similar to this page: http://thenounproject.com/) Here's what I've done so far: - created a child theme for pagelines where I added a functions.php file which allows me to upload svg files - added code to the child theme's style.css file for the icons (I suspect I'm not doing this bit correctly). Right now it reads something like this:

/* CSS FOR NAV ICONS */ .main_nav ul li.page-item-46 a { background: url('addresshere') } .main_nav ul li.page-item-15 a { background: url('addresshere') } .main_nav ul li.page-item-2 a { background: url('addresshere') }
After I did all of these things my navigation bar is all out of order and the images don't show. Questions: -I'd really like to stick with svg files but should I switch to pngs? -What would be the proper syntax to use in my child's style.css file to make my images show? -Why has the navigation bar gone out of order and how do I fix it? I realise I have a lot of questions but any help would appreciated! Cheers

Share this post


Link to post
Share on other sites

2 answers to this question

  • 0

Posted · Report post

I cannot speak for WordPress, but to my knowledge it doesn't use .svg format files for images. I believe the limit is .gif, .jpg and .png. As for the menu breaking, you didn't include the url you're using in each of those background image calls. How did you write the URL? Additionally, rather than writing the code that way, each menu item can have its own unique div class set in the menu setup. You can then apply the background with custom code using that div rather than page-item. I don't know the size of these images you're using but they'd need to be the same height for all to ensure the menu remains in the same alignment. Keep in mind, different browsers will react to this in unusual ways, and it may make mobile view unresponsive. If you want to get this done right, I'd strongly suggest one of our Pros be hired to help. http://www.pagelines.com/pros.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi rangelone, Thanks for the feedback. I did some more google searches and was able to get it figured out with the svg files. I took out the code from the child style.css and instead added div styles to my menu's navigation label. Thanks

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
Sign in to follow this  
Followers 0