Navigation Bar help needed.

Community Forums Forums Design Tips and Tricks Navigation Bar help needed.

This topic is: resolved

This topic contains 12 replies, has 2 voices, and was last updated by  keystone 10 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #73071

    keystone
    Participant
    Post count: 93

    I want to make my navigation bar semi opaque and leave the text at 100% but when I add the word “opacity” it is changing the text as well.

    Can anyone point me in the right direction please?

    Theme is Executive Pro.

    Thanks in advance for any assistance

    Gordon J


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

    #73084

    nutsandbolts
    Moderator
    Post count: 3131

    Hi Gordon,

    Can you post a link to your site? It’s easier for us to help if we can see the issue.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #73100

    keystone
    Participant
    Post count: 93

    Thanks…yes I can http://dugganmarketing.com.au


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

    #73149

    nutsandbolts
    Moderator
    Post count: 3131

    Okay, try this. You’ll need to change this in two places in your stylesheet or it won’t work.

    First, find this in your stylesheet:

    .genesis-nav-menu {
    	background-color: #000000;
    	clear: both;
    	color: #666;
    	font-size: 14px;
    	font-size: 1.4rem;
    	line-height: 1.5;
    	margin: 0;
    	overflow: hidden;
    	padding: 0;
    	width: 100%;
    }

    and change it to this:

    .genesis-nav-menu {
    	background: rgba(0, 0, 0, 0.5);
    	clear: both;
    	color: #666;
    	font-size: 14px;
    	font-size: 1.4rem;
    	line-height: 1.5;
    	margin: 0;
    	overflow: hidden;
    	padding: 0;
    	width: 100%;
    }

    Then find this:

    .nav-primary {
    	background-color: #000000;
    }

    and change it to this:

    .nav-primary {
    	background: rgba(0, 0, 0, 0.5);
    }

    That should give you enough transparency for some of the background texture to show through, but without dimming your text.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #73323

    keystone
    Participant
    Post count: 93

    Hi Andrea…thanks that worked fine. Now I have realised that removing the inner background also removes the background on posts and pages so I am trying to find a way around that…just testing a plugin called “custom background extended” that I hope will keep me transparent on the front page but provide background for my pages and posts…


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

    #73343

    nutsandbolts
    Moderator
    Post count: 3131

    You should be able to do something like #home .inner or maybe #home #inner to removing it only on the homepage. It may take a few tries to figure out exactly how it wants it to be, but similar things have worked for me on other sites.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #73352

    keystone
    Participant
    Post count: 93

    Thanks again…you have been most kind


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

    #73353

    nutsandbolts
    Moderator
    Post count: 3131

    No problem! Let me know if that doesn’t work and I’ll be glad to take a look again.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #75625

    keystone
    Participant
    Post count: 93

    Hi again Andrea….I promise not to keep bugging you with things but I thought you might be able to answer a quick question faster than me just putting another one on the forum.

    Is it possible to make the individual menu items on the nav bar appear in the middle of the bar rather than starting from the left…but still enable me to add more menu items while keeping the wording centralised.


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

    #75627

    nutsandbolts
    Moderator
    Post count: 3131

    Yep! You can certainly do that. Just find this in your stylesheet:

    .genesis-nav-menu {
    background-color: rgba(0, 0, 0, 0.0);
    clear: both;
    color: #666;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
    }

    And change it to this:

    .genesis-nav-menu {
    background-color: rgba(0, 0, 0, 0.0);
    clear: both;
    color: #666;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
    text-align: center;
    }

    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #75633

    keystone
    Participant
    Post count: 93

    You are an absolute GEM…thank you….

    If I weren’t married (and probably more than twice your age…) lol


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

    #75634

    nutsandbolts
    Moderator
    Post count: 3131

    Hahaha! I’ve had to explain to my husband more than once that telling some coder “I think I love you” for helping me is totally not flirting, that it’s just part of the relief of getting a problem solved! :)


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #75635

    keystone
    Participant
    Post count: 93

    lol…thanks again


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.