Moving navigation bar

14 posts from 3 voices

• Started 10 months ago by _weezer
• Latest reply from Ismael
• This topic is not a support question

Tags:

• logo
• menu
• navigation

1. 

   _weezer
   Member

   Hello there
   I was wondering if someone could kindly tell me what custom css code to add so I can do the following to my site:

   http://dylan.e-learndesign.co.uk/~teflwp/

   1) move my navigation bar up so it sits directly to the right of the logo

   2) use some sort of google font in the navigation menu + being able to set a size

   Kind regards

   Posted 10 months ago #
2. 

   _weezer
   Member

   Hello

   I have managed to do the following using this code

   .main_menu {
   float: right;
   position: relative;
   top: 50px;
   z-index: 100;
   padding-bottom: 20px;
   font-family: 'Kameron' !important;
   }

   Can someone please tell me how to make the font bigger?

   Kind regards

   Posted 10 months ago #
3. 

   _weezer
   Member

   Sorry to keep posting but, when I changed the main heading font via the admin panel the menu font changed to a different font.

   The menu bar is positioned where I would like it, but I would like it 1) bigger 2) darker and 3) the google font Kameron

   Would anyone be able to help please

   THanks in advance

   Posted 10 months ago #
4. 

   Mya
   

   Hi _weezer,

   Try adding this to your custom.css:

   .main_menu ul:first-child > li.current-menu-item > a, .main_menu ul:first-child > li.current_page_item > a, #top .main_menu .menu li a:hover {
       color: #111111;
       font-family: "Kameron", serif;
       font-weight: bold;
   }

   Regards,
   Mya

   Posted 10 months ago #
5. 

   _weezer
   Member

   Hi Mya

   THanks for your reply. I have added the code, but its still arial. When I rollover it turns bold and a different font (not Kameron)
   Any ideas?

   Regards

   Posted 10 months ago #
6. 

   Mya
   

   Hi,

   Sorry I left off the normal state.

   .main_menu ul:first-child > li.current-menu-item > a,
   .main_menu ul:first-child > li.current_page_item > a,
   #top .main_menu .menu li a,
   #top .main_menu .menu li a:visited,
   #top .main_menu .menu li a:hover {
       color: #111111;
       font-family: "Kameron", serif;
       font-weight: bold;
   }

   As far as the Kameron font, I'm not sure why that's not working. Let me play around some more on my install.

   Regards,
   Mya

   Posted 10 months ago #
7. 

   Mya
   

   _weezer,

   Are you using the Kameron font for the headings or are using a different font? Here's why I ask, when I change the "Heading Font" under Theme Options to Kameron the menu changed as well. So what I suggest doing is doing exactly then if you're planning on using a different font for the header use this bit of CSS in your custom.css.

   h1, h2, h3, h4, h5, h6, .hero-text, blockquote, legend, #top .slideshow_caption h1 {
       font-family: Arial, Helvetica, sans-serif;
   }

   I know that's quirky but hopefully it will work.

   Regards,
   Mya

   Posted 10 months ago #
8. 

   _weezer
   Member

   Hi Mya

   Thanks again for your replies and help.

   I want to use Droid Sans for the header, and Kameron for the menu nav bar - so what I did was paste in your bits of code, and changed Arial to Droid Sans. This is what I have in my Quick CSS bit, but the Kameron font is still not showing.

   .main_menu ul:first-child > li.current-menu-item > a,
   .main_menu ul:first-child > li.current_page_item > a,
   #top .main_menu .menu li a,
   #top .main_menu .menu li a:visited,
   #top .main_menu .menu li a:hover {
   color: #111111;
   font-family: "Kameron", serif;
   font-weight: bold;
   }

   h1, h2, h3, h4, h5, h6, .hero-text, blockquote, legend, #top .slideshow_caption h1 {
   font-family: "Droid Sans"
   }

   Posted 10 months ago #
9. 

   Ismael
   Moderator

   Hello,

   Maybe you forgot to add this google font code on header.php.

   <link href='http://fonts.googleapis.com/css?family=Kameron' rel='stylesheet' type='text/css'>

   Regards,
   Ismael

   Posted 10 months ago #
10. 

    _weezer
    Member

    Hi Ismael

    Thats very much for your reply. Do I add that anywhere in the header.php? (Sorry for my ignorance)

    Posted 10 months ago #
11. 

    Ismael
    Moderator

    Hello,

    Yes, that's right. Find this code

    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/shortcodes.css" type="text/css" media="screen"/>

    Add the google snippet below. Let us know if it works. :)

    Regards,
    Ismael

    Posted 10 months ago #
12. 

    Ismael
    Moderator

    Hello,

    Yes, that's right. Find this code

    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/shortcodes.css" type="text/css" media="screen"/>

    Add the google snippet below. Let us know if it works. :)

    Regards,
    Ismael

    Posted 10 months ago #
13. 

    _weezer
    Member

    Hello. Sorry for the dealy in replying, but I've just tried that and it works. Thank you!

    Posted 10 months ago #
14. 

    Ismael
    Moderator

    Hi _weezer,

    Glad that we could help you. :)

    Regards,
    Ismael

    Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.