Change font size and color in menu bar

  • mirdonamy

    #15372

    I have been trying to change my menu navigation background and hover color for about 4 hours now with no luck.

    I do not know CSS, and my pages (navigation) colors are not in the graphene colour options.

    I can go into the CSS if I am given exact directions.

    Does anyone know how to change the PAGES menu background and hover color? My site is light blue and the Pages and hover are black 🙁

    http://www.laweddingwoman.com

    I don’t want black. I can’t find #000 anywhere! Where is this black coming from? I checked ALL style sheets and changed all #000 to a blue color, but it still shows.

    Please help!

    foolhandy

    #15373

    I see that bwalklet & mirdonamy have both managed to do this.

    Would either of you mind saying how? Thanks…

    printartist

    #15374

    @bwalklet I stumbled upon the solution to change the color of the top bar. You need to replace the image file sprite_h_light.png to the color of your choice.

    Like everyone else I have been wanting to change the colors of my navigation. This is the first change I have been able to do, hopefully I can do the rest soon.

    http://www.designbywills.com

    lmkitties

    #15375

    I have changed the color on every line of my stylesheet from line 259 to 360 to #d8d8d8. Yet my menu default and hover color is still black. Can someone identify the specific line of code that must be changed in order to effect a color change from the black default and hover color?

    Mod

    Kenneth John Odle

    #15376

    Hover is on lines 305 to 437. Here’s an example starting on line 305:

    /* Top level header menu, hover and current state */
    #header-menu > li:hover,
    #header-menu > li.current-menu-item,
    #header-menu > li.current-menu-ancestor {
    background: url(images/sprite_h.png) left -100px repeat-x #eee;
    }

    See this post for more information about sprite images.

    Ken

    lmkitties

    #15377

    I have changed the color number to red from lines 259 to 447. I have turned off the background images also. Still my menu default state and hover color is black on my custom menu. I am a newbie so if someone could take a look at my code and tell me if I’ve done something incorrectly, I’d appreciate it. Here is the code starting at line 259.

    /* What gives our menus style */

    #nav .menu {

    width: 100%;

    }

    .menu-bottom-shadow{

    background: url(images/sprite_h.png) left top repeat-x #eee;

    height: 3px;

    width: 100%;

    }

    #nav .menu li:hover{

    color: #488ac7;

    position: static;

    }

    #nav .menu ul {

    box-shadow: 0 1px 2px #555;

    }

    /* Top level header menu, default state */

    #header-menu-wrap{

    position: relative;

    }

    #header-menu {

    /*background: url(images/sprite_h.png) left -3px repeat-x #101010;*/

    color: #488ac7;

    }

    #header-menu > li {

    font: normal 14px arial;

    margin: 0 2px;

    }

    #header-menu > li:first-child {

    margin-left: 10px;

    }

    #header-menu > li > a {

    color: #488ac7;

    line-height: 16px;

    padding: 9px 10px 10px;

    }

    #header-menu > li > a > span {

    display: block;

    font-size: 11px;

    color: #488ac7;

    }

    #header-menu > li.menu-item-ancestor > a {

    /*background: url(images/sprite_master.png) -877px -236px no-repeat transparent;*/

    color: #488ac7;

    padding-left: 26px;

    }

    /* Top level header menu, hover and current state */

    #header-menu > li:hover,

    #header-menu > li.current-menu-item,

    #header-menu > li.current-menu-ancestor {

    color: #488ac7;

    /*background: url(images/sprite_h.png) left -100px repeat-x #eee; */

    }

    #header-menu > li:hover > a,

    #header-menu > li.current-menu-item > a,

    #header-menu > li.current-menu-ancestor > a {

    color: #488ac7;

    }

    #header-menu > li:hover > a > span,

    #header-menu > li.current-menu-item > a > span,

    #header-menu > li.current-menu-ancestor > a > span {

    color: #488ac7;

    }

    #header-menu > li.menu-item-ancestor:hover > a,

    #header-menu > li.current-menu-item > a,

    #header-menu > li.current-menu-ancestor > a {

    background-position: -877px -192px;

    color: #488ac7;

    }

    /* Sub level header menu, default state */

    #header-menu ul li a {

    color: #488ac7;

    padding: 10px;

    width: 180px;

    }

    #header-menu ul li {

    /*background: url(images/sprite_h.png) left -377px repeat-x #dfdfdf;*/

    color: #488ac7;

    }

    #header-menu ul li.menu-item-ancestor > a {

    /*background: url(images/sprite_master.png) -652px -194px no-repeat transparent;*/

    color: #488ac7;

    padding-right: 25px;

    width: 165px;

    }

    /* Sub level header menu, hover and current state */

    #header-menu ul li:hover,

    #header-menu ul li.current-menu-item,

    #header-menu ul li.current-menu-ancestor {

    background-position: left -456px;

    background-color: #488ac7;

    }

    #header-menu ul li:hover > a,

    #header-menu ul li.current-menu-item > a,

    #header-menu ul li.current-menu-ancestor > a {

    color: #488ac7;

    }

    #header-menu ul li.menu-item-ancestor:hover > a,

    #header-menu ul li.current-menu-item > a,

    #header-menu ul li.current-menu-ancestor > a {

    background-position: -652px -238px;

    }

    /* Secondary menu */

    /* Top level, default state */

    #secondary-menu-wrap {

    width: 100%;

    border-top: 1px solid #000;

    }

    #secondary-menu {

    width: 100%;

    background: url(images/sprite_h.png) left -540px repeat-x #222;

    }

    #secondary-menu > li {

    font: normal 11px arial;

    margin: 0 2px;

    text-transform: uppercase;

    }

    #secondary-menu > li:first-child {

    margin-left: 10px;

    }

    #secondary-menu > li > a {

    color: #488ac7;

    line-height: 16px;

    padding: 7px 10px 6px;

    }

    #secondary-menu > li.menu-item-ancestor > a {

    /*background: url(images/sprite_master.png) -877px -316px no-repeat transparent;*/

    color: #488ac7;

    padding-left: 20px;

    }

    /* Top level, hover and current state */

    #secondary-menu > li:hover,

    #secondary-menu > li.current-menu-item,

    #secondary-menu > li.current-menu-ancestor {

    /*background: url(images/sprite_h.png) left -614px repeat-x #dfdfdf;*/

    color: #488ac7;

    }

    #secondary-menu > li:hover > a,

    #secondary-menu > li.current-menu-item > a,

    #secondary-menu > li.current-menu-ancestor > a {

    color: #488ac7;

    }

    #secondary-menu > li.menu-item-ancestor:hover > a,

    #secondary-menu > li.current-menu-item > a,

    #secondary-menu > li.current-menu-ancestor > a {

    background-position: -877px -283px;

    }

    /* Sub level, default state */

    #secondary-menu ul li a {

    color: #488ac7;

    padding: 7px 15px 6px;

    width: 170px;

    line-height: 16px;

    }

    #secondary-menu ul li {

    /*(background: url(images/sprite_h.png) left -614px repeat-x #dfdfdf;*/

    color: #488ac7;

    }

    #secondary-menu ul li.menu-item-ancestor > a {

    background: url(images/sprite_master.png) -652px -286px no-repeat transparent;

    padding-right: 20px;

    width: 165px;

    }

    /* Sub level header menu, hover and current state */

    #secondary-menu ul li:hover,

    #secondary-menu ul li.current-menu-item,

    #secondary-menu ul li.current-menu-ancestor {

    background-position: left -684px;

    background-color: #212121;

    }

    #secondary-menu ul li:hover > a,

    #secondary-menu ul li.current-menu-item > a,

    #secondary-menu ul li.current-menu-ancestor > a {

    color: #488ac7;

    }

    #secondary-menu ul li.menu-item-ancestor:hover > a,

    #secondary-menu ul li.current-menu-item > a,

    #secondary-menu ul li.current-menu-ancestor > a {

    background-position: -652px -319px;

    }

    Mod

    Kenneth John Odle

    #15378

    You really should be doing this in a child theme, or via custom CSS.

    I have turned off the background images also

    No, not really. You have commented this code out in Graphene’s style.css file, but you are also using the light-coloured header bars option, which causes the style-light.css file to load. This file loads after the default Graphene stylesheet, and since the light stylesheet is loading a background image, that’s why you’re not seeing a change.

    Instead of altering the theme’s files, you should add something like this to your custom CSS options:

    #header-menu {
    background: url(none) #070707;
    }

    This way, your changes will be preserved in the next update, and you will also get the results you are looking for.

    BTW, you should put code between backticks (the button with the “~” on it, upper left-hand corner of keyboard, usually). There’s no need to code-dump, either. I can see your css files just fine.

    Let us know how this works out for you.

    Good luck,

    Ken

    lmkitties

    #15379

    Thanks, that explains a lot. Glad that I backed up my style.css file before I started.

    I didn’t know that Custom CSS was a plugin, thought that I had to update the stylesheets directly. I used that on the free wordpress side so I know how it works.

    Added the plugin, used the code you provided edited with the color I wanted for default and the code from the light stlyesheet for the hover items and edited to include the hover color that I wanted and it worked great.

    Thanks so much.

    lmkitties

    #15380

    BTW, how can you see my css files?

    Mod

    Kenneth John Odle

    #15381

    You don’t need a plugin for custom CSS — it’s built into Graphene.

    Graphene Options >> Display >> Custom CSS (way at the bottom) — just add whatever you like.

    I use “View Source” in my browser to see the source code and click on the link to your style sheet.

Viewing 10 posts - 11 through 20 (of 22 total)

  • You must be logged in to reply to this topic.