Jump to content
rjltaylor

font change on hover in main navigation bar

Recommended Posts

rjltaylor    0
rjltaylor

Would like to make a font-family change (ChopinScript) on hover in the main navigation bar. I've made several attempts in the custom code area, but can't seem to get the correct formula or the find right section of the stylesheet to make the change.

 

Would kindly appreciate some assistance if you've done this before.

 

The site can be viewed at http://www.pjodwyer.com/pjwp/

 

Thanks in advance for your help!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, how are applying the font? Is it part of googlefonts or via typekit/cufon etc.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rjltaylor    0
rjltaylor

Yes, I'm using the WP Googlefonts plug-in.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI,

 

Unless my eyes are deceiving me I am unable to find that font in the Google webfonts service.

 

Therefore, you will most likely need to use the @font-face to include this font on your website, you can find more information on @font-face here.

 

http://www.font-face.com/

 

The add the font family to your custom CSS for the nav a:hover class.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rjltaylor    0
rjltaylor

Hi Danny,

Sorry, you are correct. I apologize for the confusion. From what I've found at font-face, it should look like this:

@font-face {

font-family: 'ChopinScript';

src: url('chopinscript-webfont.eot');

src: url('chopinscript-webfont.eot?#iefix') format('embedded-opentype'),

url('chopinscript-webfont.woff') format('woff'),

url('chopinscript-webfont.ttf') format('truetype'),

url('chopinscript-webfont.svg#chopinscript') format('svg');

font-weight: normal;

font-style: normal;

}

However, my brain is struggling the make the connection code to actually make it happen. How do I connect the a:hover class code to this? It feels like I'm missing steps and this is new and unfamiliar territory for me right now.

Your expertise would be greatly appreciated!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, once you've added the @font-face code you can just call the font in the css.

 

.navbar .navline > li > a:hover {font-family: your font;}

 

 

This site gives a good example - http://bavotasan.com/2010/embedding-fonts-web-site-css-font-face/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rjltaylor    0
rjltaylor

Great! Thanks so much! The article helped a lot as well!

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

    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • Houston Haynes
      By Houston Haynes+
      I'm still "piercing the veil" of platform 5, with page navigation the current subject of interest. I worked with a few plugins (the most useful being Next Page Not Next Post) but I wanted to take a step back and start with an example - and see if I could get a bit of help "inside the beltway". 
      What I'm looking to do is substantially similar to the pagelines docs pages - see my annotated screenshots attached. At the top of a "child" page I want a link back to the "parent" page - and at the bottom of that "child" page I want to place a similar link to the "grandchild" page. At the bottom of each grandchild page I want there to be navigation "buttons" to sibling pages in the hierarchy. 
      "Next Page Not Next Post" handles what I'm expecting for "sibling" navigation, but I'm having a bit of trouble getting over the logistical hump of applying that functionality to my page "Template C" instance only. And per the attached examples, while researching how to solve this problem I see on the Pagelines site *itself* that the navigation elements are in place - and I especially like the oval button formatting of the sibling page navigation.
      So - really, my question is two-part:
      Are there plugins/code snippets/tutorials/threads here that show how Pagelines achieved their page hierarchy nagivation, and  Is there a tutorial (or advice from generous contributors here) on how to use the PHP templates to override the content portion of the page to add the navigation elements? Thanks in advance!


×