WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] TopNav background duplicating (5 posts)

  1. perezdi
    Member
    Posted 2 years ago #

    Hi there,

    It's been a few days already that I'm trying to find a solution for this:
    http://oldtrafford.com.br

    Directly under the header the background for the top menu is duplicating. I tried already for several hours in a row to get rid of it, repositioning things here and there and well... tried everything that I know about CSS (not much, guilt as charged).

    Any ideas?

    Tell me what information you guys and girls need. Thank you.

  2. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    I don't see any duplication of menus or backgrounds -- you DO have two menus, right? One on the grey at the very top and one on the red below the header section?

    So not sure what you are referring to...what browser are you using? I'm on Firefox on a Mac.

  3. perezdi
    Member
    Posted 2 years ago #

    Chrome and Firefox on Windows 7.

    --

    Yes, I do have two menus, one is for pages and other for categories. A grey one and a red one. But here is the thing, the red one, the background, for a lot of people is duplicated. You are the only one that report no duplication so far.

    --

    So any ideas?

  4. perezdi
    Member
    Posted 2 years ago #

    Here is the TopNav CSS

    /* -------------------[ Top Navigation ]------------------- */
    
    #topnav {	padding: 1px 0 0;	margin: 0 auto;	background:url(images/navbg.gif) top left;	}
    
    #topnav .limit {
    	width:990px;
    	height: 40px;
    	margin:0 auto;
    	padding:0;
    	}
    
    #topnav ul {
    	width:750px;
    	height: 40px;
    	list-style: none;
    	padding: 0;
    	margin: 0 ;
    	float: left;
    	}
    
    #topnav ul a, #topnav ul a:link, #topnav ul a:visited {
    	display: block;
    	text-decoration: none;
    	padding: 0 10px;
    	margin:0;
    	color:#fff;
    	}
    
    #topnav ul a:hover, #topnav ul a:active  {
    	background:#0A1F33;
    	}
    
    #topnav li {
    	height:40px;
    	line-height:40px;
    	float: left;
    	padding: 0;
    	}
    
    #topnav li ul {
    	z-index:9999;
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 200px;
    	margin: 0;
    	padding:0;
    	border-top:1px solid #f5f5f5;
    	background:#0A1F33;
    	}
    
    #topnav li li {
    	height:30px;
    	line-height:30px;
    	border-bottom:1px solid #000;
    	}
    
    #topnav ul li ul a, #topnav ul li ul a:link, #topnav ul li ul a:visited {
    	width:180px;
    	}
    
    #topnav ul li ul a:hover, #topnav ul li ul a:active  {
    	background:#000;
    	}
    
    #topnav li ul ul {
    	border:0;
    	margin: -30px 0 0 200px;
    	}
    
    #topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li.sfhover ul ul, #topnav li.sfhover ul ul ul {
    	left: -999em;
    	}
    
    #topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li.sfhover ul, #topnav li li.sfhover ul, #topnav li li li.sfhover ul {
    	left: auto;
    	}
    
    #topnav li:hover, #topnav li.sfhover {
    	background:#0A1F33;
    	}
  5. perezdi
    Member
    Posted 2 years ago #

    Here is how I solved it:

    The problem wasn't in the CSS. The banner in the header.php file didn't have set a width or height.

    <h1><a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('template_directory'); ?>/images/headlogo.png" width="1366" height="274" border="0" alt="Old Trafford Brasil" /></a></h1>

    (I put the code between backticks but it didn't worked)

    I insert the proper size of the banner and it worked. Thanks anyway WPyogi for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic