WordPress.org

Forums

Navbar color (8 posts)

  1. ValterF
    Member
    Posted 11 months ago #

    I want my navigationbar to change color when I touch my already selected navigationbar with my mousepointer. If I touch one of the other ones they change color, but not the selected one.

    Please help me.

    Valter

  2. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Let's see your site

  3. ValterF
    Member
    Posted 11 months ago #

    It's a local hosted site. But here's the code if that's what you mean?

    /* MODULE: #Main navigation
    ================================================== */
    
    .alt-nav { display: none; }
    #nav { text-align: center; }
    #nav ul { margin: 0; padding: 0; list-style: none; text-align: center; }
    #navigation li { position: relative; z-index: 100;}
    #navigation > li { display: inline-block; }
    #navigation ul { position: absolute; z-index: 300; top: -999em; }
    #navigation ul ul { }
    #navigation li:hover > ul,
    #navigation .sfHover > ul { top: auto; }
    #navigation li li:hover > ul,
    #navigation li .sfHover > ul { top: 0; left: 100%; }
    #navigation li li li:hover > ul,
    #navigation li li .sfHover > ul{ top: 0; left: 100%; }
    #navigation a, #navigation a:visited { display: block; white-space: nowrap; }
    
    #navigation a, #navigation a:visited { font-size:14px; padding:5px 16px 5px 16px; margin:0 0 0 1px; background:#f1f1f1; color:#222; text-decoration:none; } /* Global Menu Link Styles */
    
    #navigation a:hover,
    #navigation .sfHover > a,
    #navigation .sfHover > a:visited { color:#f1f1f1; background: #666; } /* First Level & Global Menu Link Hover Styles */
    
    #navigation > li > a,
    #navigation > li > a:visited {  } /* First Level Menu Link Styles */
    
    #navigation > li ul a,
    #navigation > li ul a:visited{  } /* All Other Menu Level Link Styles */
    
    #navigation > li ul a:hover,
    #navigation > li ul .sfHover > a,
    #navigation > li ul .sfHover > a:visited { } /* All Other Level Menu Link Hover Styles */
    
    #navigation > li.current_page_item > a,
    #navigation > li.current_page_item > a:visited,
    #navigation > li.current-menu-item > a,
    #navigation > li.current-menu-item > a:visited { background: #222; color:#f1f1f1; } /* WordPress Styles for Current Page */
    
    #navigation ul {  } /* All Lower Level Menu Styles */
  4. ValterF
    Member
    Posted 11 months ago #

    The whole code:

    /*
    Theme Name: Magnifique
    Theme URI: http://www.cssigniter.com/ignite/themes/magnifique
    Description: Responsive blog theme for WordPress
    Author: the CSSIgniter team
    Version: 1.2
    Tags: black, three-columns
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */
    
    /* GLOBAL: #Basic Styles
    ================================================== */
    body { margin:80px 0; font:normal 16px Georgia, serif; line-height: 1.6em; background: #fff; color:#444; }
    p { font-size:16px; }
    a { color:#fc3300; text-decoration: none; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; }
    a:hover { color:#000; }
    a:hover img { opacity:0.7 }
    input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { border-radius:0; }
    .wp-pagenavi { text-align: center; }
    
    /* GLOBAL: Media floats, captions, galleries
    ================================================== */
    .alignleft { float:left; margin:5px 15px 15px 0; }
    .alignright { float:right; margin:5px 0 15px 15px; }
    .aligncenter { clear: both;	display: block;	margin-left: auto; margin-right: auto; }
    .wp-caption p { font:normal 12px "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; margin-bottom:25px; }
    .gallery img { border:none !important; }
    
    /* GLOBAL: #Typography
    ================================================== */
    h1 { font-size:36px; }
    h2 { font-size:30px; }
    h3 { font-size:20px; }
    h4 { font-size:16px; }
    h5 { font-size:14px; }
    h6 { font-size:12px; }
    h1,h2,h3,h4,h5,h6,.read-more,.prev,.next,.more-link,blockquote{ font-family: 'Patua One', cursive; font-style: normal; font-weight: 400; }
    .footer, .footer p { font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; font-size:11px; color:#777; text-align: center; text-transform: uppercase; letter-spacing: 0.1em; }
    blockquote p { font-size:18px; color:#444; }
    blockquote cite { font:normal 14px Georgia, serif; }
    
    /* GLOBAL: #WordPress Styles
    ================================================== */
    .wp-caption { }
    .wp-caption-text { }
    .sticky, .gallery-caption, .bypostauthor { }
    
    /* HEADER
    ================================================== */
    .header { border-bottom:solid 1px #d1d1d1; padding:10px 0 0 0; text-align: center; }
    .header h1 { line-height: 2; margin:0 0 10px 0; }
    .header h1 a { color:#222; text-transform: uppercase; }
    .header h2 { font-size: 17px; font-weight: 300; color:#b1b1b1; line-height: 1; letter-spacing: 0.5em; text-transform: uppercase; margin:0 0 50px 0; }
    
    /* HEADER: #Navigation
    ================================================== */
    .nav { margin-bottom:0; font-size:11px; font-weight:300; }
    
    /* MODULE: #Main navigation
    ================================================== */
    
    .alt-nav { display: none; }
    #nav { text-align: center; }
    #nav ul { margin: 0; padding: 0; list-style: none; text-align: center; }
    #navigation li { position: relative; z-index: 100;}
    #navigation > li { display: inline-block; }
    #navigation ul { position: absolute; z-index: 300; top: -999em; }
    #navigation ul ul { }
    #navigation li:hover > ul,
    #navigation .sfHover > ul { top: auto; }
    #navigation li li:hover > ul,
    #navigation li .sfHover > ul { top: 0; left: 100%; }
    #navigation li li li:hover > ul,
    #navigation li li .sfHover > ul{ top: 0; left: 100%; }
    #navigation a, #navigation a:visited { display: block; white-space: nowrap; }
    
    #navigation a, #navigation a:visited { font-size:14px; padding:5px 16px 5px 16px; margin:0 0 0 1px; background:#f1f1f1; color:#222; text-decoration:none; } /* Global Menu Link Styles */
    
    #navigation a:hover,
    #navigation .sfHover > a,
    #navigation .sfHover > a:visited { color:#f1f1f1; background: #666; } /* First Level & Global Menu Link Hover Styles */
    
    #navigation > li > a,
    #navigation > li > a:visited {  } /* First Level Menu Link Styles */
    
    #navigation > li ul a,
    #navigation > li ul a:visited{  } /* All Other Menu Level Link Styles */
    
    #navigation > li ul a:hover,
    #navigation > li ul .sfHover > a,
    #navigation > li ul .sfHover > a:visited { } /* All Other Level Menu Link Hover Styles */
    
    #navigation > li.current_page_item > a,
    #navigation > li.current_page_item > a:visited,
    #navigation > li.current-menu-item > a,
    #navigation > li.current-menu-item > a:visited { background: #222; color:#f1f1f1; } /* WordPress Styles for Current Page */
    
    #navigation ul {  } /* All Lower Level Menu Styles */
    
    /* MODULE: #Entry
    ================================================== */
    .entry:before {	content: '\2219'; display:block; text-align: center; font-size:36px; line-height: 1; }
    .entry { padding:30px 15px; border-bottom:solid 1px #d1d1d1; }
    .entry:last-child { border-bottom:double 3px #d1d1d1; }
    .entry-head { text-align: center; }
    .entry-head time { font: normal 11px "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; letter-spacing: 0.2em; margin:30px 0 5px 0; display:block; text-transform: uppercase; }
    .entry-head h2 { margin:0 0 40px 0; }
    .entry-featured { margin-bottom:15px; text-align: center; }
    .entry-featured p { font-size:12px; margin-top:5px; font: normal 13px "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; }
    .entry-footer { padding-bottom:40px; }
    .entry-footer .read-more { font-size:16px; }
    .entry { }
    .entry-main { margin-bottom:30px; padding-bottom:30px; }
    .single .entry-main:after, .page .entry-main:after { content: '\2219'; display:block; text-align: center; font-size:36px; line-height: 1; }
    .entry-related, .entry-comments-inner { border-top:solid 1px #d1d1d1; padding-top:40px; padding-bottom:40px; }
    .entry-related p { margin-bottom:0; }
    .entry-cats { font-size:11px; text-transform: uppercase; letter-spacing: 0.3em; }
    .more-link { display:block; font-size:16px; padding:30px 0 0 0; }
    
    /* MODULE: #Comments
    ================================================== */
    .entry-comments { margin:40px 0 0 0; padding:20px 0 0 0; }
    .entry-comments h3 { margin-bottom:0; }
    .entry-comments ol, .entry-comments ul { list-style: none; font-size:inherit;  }
    .entry-comments > ol { margin-left:0; margin-bottom:0; }
    .entry-comments li { margin:0 !important; padding:0 !important; background: none !important; position:relative; }
    .entry-comments .avatar { position:absolute; top:20px; left:0; margin: 0 15px 5px 0; text-align: center; border-radius:100px; }
    .entry-comments .comment-text { margin-bottom:10px; border-bottom:solid 1px #d1d1d1; }
    .entry-comments > .comment-text:last-child { margin-bottom:0; }
    .entry-comments .comment-copy { margin-left:60px;  padding: 15px 15px 25px 15px; }
    .entry-comments .comment-copy p { margin-bottom:10px; font-size: 13px; }
    .entry-comments .comment-meta { font-weight: bold; margin-bottom:5px !important; }
    #comment-list { margin-left:0; }
    #comment-list ul { margin-left:60px; }
    .comment-reply-link { font-size:11px; text-transform: uppercase; }
    #cancel-comment-reply-link { display:block; font-size:14px; margin:20px 0; }
    #cancel-comment-reply-link:hover { border:none; }
    #form-wrapper { margin-bottom:30px; }
    #form-wrapper label { display:inline-block; }
    #form-wrapper input[type="text"] { width:70%; }
    #form-wrapper textarea { height:200px; }
    #respond .form-submit #submit { background: #fc3300; font-family: inherit; border:none; color:#fff; padding:10px 15px; font-size:14px; cursor: pointer; }
    #respond .form-submit #submit:hover { background: #444; color:#fff; }
    #respond .form-allowed-tags { display:none; }
    
    /* MODULE: #Paging
    ================================================== */
    .entry:before {	content: '\2219'; display:block; text-align: center; font-size:36px; line-height: 1; }
    .paging { border-bottom:double 3px #d1d1d1; padding:40px 0; }
    .paging .row { padding:0; }
    .prev,.next { margin:0; padding:0; }
    .prev a,.next a { display:inline-block; }
    .prev { text-align: right; padding-right:10px; }
    .next { padding-left:10px; }
    .prev a { background: url(images/arrows.png) no-repeat 0 -19px; padding-left:20px;  }
    .next a { background: url(images/arrows.png) no-repeat right 7px; padding-right:20px;  }
    
    /* MODULE: #Footer
    ================================================== */
    .footer { padding:30px 0 0 0; }
    
    /* #Media Queries
    ================================================== */
    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {
    	body { margin:0 0 15px 0; }
    }
    
    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
    }
    
    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    	.prev, .next { text-align: center; }
    }
    
    /* Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 480px) {
    	.header { padding-top:30px; }
    	.header h2 { margin-bottom:15px; }
    	.entry { padding-top:15px; }
    	.entry time { margin-top:15px; }
    	.entry-footer { padding-bottom:20px; }
    	.entry-comments .avatar { display:none; }
    	.entry-comments .comment-copy { margin-left:0; }
    	#comment-list ul { margin-left:0; }
    	#navigation { display:none; }
    	.alt-nav { display:block; width:100%; margin-bottom:10px; }
    }
    
    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    
    }
    
    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {
    
    }
  5. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Replicate your nav bar in a sandbox environment: http://cssdesk.com - Then share us a link to that

  6. ValterF
    Member
    Posted 11 months ago #

    I don't understand how to do that...

  7. ValterF
    Member
    Posted 11 months ago #

  8. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Yes but where's your HTML?

Reply

You must log in to post.

About this Topic