Jump to content


Photo
- - - - -

Adding svg icons to my navigation bar - how?


  • Please log in to reply
2 replies to this topic

#1 jane

jane

    Advocate

  • Members
  • 345 posts
  • Country: Country Flag

Posted 18 May 2012 - 08:33 PM

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:

Please Login or Register to see this Hidden Content



(The navigation bar has seven tabs. I would like each icon to be beside its navigation/page title similar to this page:

Please Login or Register to see this Hidden Content

)

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

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 May 2012 - 09:18 PM

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.

Please Login or Register to see this Hidden Content



#3 jane

jane

    Advocate

  • Members
  • 345 posts
  • Country: Country Flag

Posted 19 May 2012 - 02:51 AM

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