Jump to content
rjltaylor

font change on hover in main navigation bar

Recommended Posts

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

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

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

Share this post


Link to post
Share on other sites
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

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

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

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

    • Liv Kundalini
      By Liv Kundalini+
      Hi -
      Pulling my hair out over here, and would love an assist!
      Site I am building, http://www.livkundalini.com/home, has a problem with the submenu items in the nav not appearing. 
      If anyone wants to see what the Nav should look like, feel free to look in the footer on the left hand side.
      Have tried disabling Pagelines and using the twentyseventeen theme, but problem persists.
      Saw this error (pasted at the bottom of this post) displaying in the inspector, and saw discussion of Jetpack potentially being a culprit. Disabled Jetpack, but the problem persists.
      Had the hosting company even flush the server-side cache, but no avail.
      Any thoughts? Please? It's the only thing keeping me from launching this site!
      Many Thanks,
      Todd
       
      WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403   O @ (index):7
    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • Dan Haddock
      By Dan Haddock
      Hi Pagelines team and wider community,
      I am looking to develop a single post page for my blog. I have read over an old article on the subject, however the link provided on achieving this goal was giving me security warnings. Is there any way I can get round this?
      Secondly, I have had a root around the .zip file provided on my sites backup, however was unable to locate any file in there with the name of Single.php. Does this file exist in the Pagelines theme?
      By the way, this is the unsafe article: http://support.pagelines.me/docs/customization/create-a-custom-page-template/ (Click at your peril).
       
    • 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.


×