1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Header HTML/CSS causing errors w/ navigation bar

Discussion in 'Troubleshooting and Problems' started by theJay, Apr 16, 2011.

  1. theJay

    theJay Member

    Hi there.

    So I've been attempting to work in a different header/footer into my forum's container template. However, when I put the code in, the CSS for the navigation menu gets thrown off and looks awful. I can't seem to find the conflict between the new CSS and the old CSS. It doesn't matter how I place it, it just continues to cause conflicts.

    Below is the code I added and attached are images showing what happens.

    HTML:
        <!-- BEGIN STYLESHEETS -->
    
        <link rel="stylesheet" href="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/style.css" type="text/css" media="screen" />
    
        <link rel="alternate" type="application/rss+xml" title="SuperCritical Gaming RSS Feed" href="http://supercriticalgaming.com/feed/" />
    
        <link rel="alternate" type="application/atom+xml" title="SuperCritical Gaming Atom Feed" href="http://supercriticalgaming.com/feed/atom/" />
    
        <link rel="pingback" href="http://supercriticalgaming.com/xmlrpc.php" />
    
        <!-- BEGIN JS -->
    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    
        <script type="text/javascript" src="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/js/superfish.js"></script>
    
        <script type="text/javascript" src="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/js/jquery.fancybox-1.3.4.pack.js"></script>
    
        <script type="text/javascript" src="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/js/jquery.scrollTo.js"></script>
    
        <script type="text/javascript" src="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/js/scripts.js"></script>
    
        <script type="text/javascript" src="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/js/jquery.tools.min.js"></script>
    
    <script type='text/javascript' src='http://supercriticalgaming.com/wp-includes/js/l10n.js?ver=20101110'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://supercriticalgaming.com/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://supercriticalgaming.com/wp-includes/wlwmanifest.xml" />
    <link rel='index' title='SuperCritical Gaming' href='http://supercriticalgaming.com/' />
    <meta name="generator" content="WordPress 3.1.1" />
    <link href="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/styles/default.css" rel="stylesheet" type="text/css" />
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css">
        html { margin-top: 28px !important; }
        * html body { margin-top: 28px !important; }
    </style>
    
    <body class="home blog logged-in admin-bar layout-2cr">
    
        <!-- BEGIN HEADER WRAPPER -->
    
        <div id="header-wrapper">
    
            <!-- BEGIN HEADER -->
    
            <div id="header">
    
                <!-- BEGIN TOP NAVIGATION -->
    
                <ul id="top-navigation">
    
                    <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-7"><a href="http://supercriticalgaming.com">Home</a></li>
    <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="http://supercriticalgaming.com/forums">Forums</a></li>
                </ul>
    
                <!-- END TOP NAVIGATION -->
    
                <!-- BEGIN SOCIAL MEDIA -->
    
                <div id="social-media">
    
                    <a href="http://www.facebook.com/"><img src="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/images/facebook.png" alt="Facebook" /></a>                <a href="http://www.twitter.com/"><img src="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/images/twitter.png" alt="Twitter" /></a>                <a href="http://supercriticalgaming.com/feed/" title="Subscribe to our feed"><img src="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/images/rss.png" alt="RSS" /></a>
    
                </div>
    
                <!-- END SOCIAL MEDIA -->
    
                <!-- BEGIN LOGO -->
    
                <div id="logo">
    
                                <a href="http://supercriticalgaming.com"><img src="http://supercriticalgaming.com/wp-content/themes/leetpress-a-gaming-wordpress-theme/leetpress/images/logo.png" alt="SuperCritical Gaming" /></a>
    
                            </div>
    
                <!-- END LOGO -->
    
                <!-- BEGIN NAVIGATION-WRAPPER -->
    
                <div id="navigation-wrapper">
    
                    <!-- BEGIN NAVIGATION -->
    
                    <ul id="navigation">
    
                        <li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18"><a href="http://supercriticalgaming.com/category/news/">News</a></li>
    <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://supercriticalgaming.com/supercritical-jawnman/">SuperCritical JawnMan</a>
    <ul class="sub-menu">
        <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://supercriticalgaming.com/supercritical-jawnman/">About</a></li>
        <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://supercriticalgaming.com/supercritical-jawnman-live/">Watch Live!</a></li>
        <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="http://supercriticalgaming.com/category/jawnmantv/pastepisodes/">Past Episodes</a></li>
    </ul>
    </li>
    <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://supercriticalgaming.com/dj-kurono/">DJ Kurono</a>
    <ul class="sub-menu">
        <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://supercriticalgaming.com/dj-kurono/">About</a></li>
        <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="http://www.soundcloud.com/djkurono">Soundcloud</a></li>
        <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28"><a href="http://supercriticalgaming.com/category/djkurono/mixes/">Mixes</a></li>
    </ul>
    </li>
                    </ul>
    
                    <!-- END NAVIGATION -->
    
                    <!-- BEGIN SEARCH -->
    
                    <div id="search">
    
                        <form method="get" id="searchform" action="http://supercriticalgaming.com/">
    
        <input type="text" name="s" id="s" value="" />
    
    </form>                </div>
    
                    <!-- END SEARCH -->
    
                </div>
    
                <!-- END NAVIGATION-WRAPPER -->
    
            </div>
    
            <!-- END HEADER -->
    
        </div>
    
        <!-- END HEADER-WRAPPER -->
    
    Any help with this matter will be greatly appreciated. I just want to move on to the next phase of my site's development.
     

    Attached Files:

  2. theJay

    theJay Member

    Anyone have any thoughts/ideas? I've been looking at it and tweaking all day and nothing seems to be working. Any input is welcome.
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    FWIW, I poked around the code yesterday looking for possible causes of this problem. I didn't make any headway.

    What you are trying to do is really messy (combining two complete style sheets). Ideally you should include only the CSS that is needed for your header.
     
  4. theJay

    theJay Member

    Yeah, it's a little hack-ish.

    However, I attempted to put the needed CSS in the extra.css template but as soon as the template is saved, the navigation menu does the same exact thing as in the above pictures (without the added header).

    Are the XenForo CSS id names similar to the Wordpress ones that I am trying to use?

    For example, the header I am trying to add uses this:
    HTML:
    <div id="navigation-wrapper">
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can check for naming conflicts by searching XenForo's templates for the class and id names in question. You can search for that id in your:

    Admin CP -> Appearance

    Screen shot 2011-04-17 at 9.57.16 PM.png

    Class name searches are prefixed with a period instead of a pound.

    My guess is it's something to do with CSS positioning. Look for any positioning attributes in your CSS.
     
  6. theJay

    theJay Member

    Here's the CSS for the header. There does appear to be a lot of positioning, but I still am unsure of how it is messing around with XenForo's code.

    Code:
    /***    2. Header    ***/
    #header-wrapper { background:url(images/header-bg.png) repeat-x; height:202px; }
    #header { width:960px; margin:0 auto; position:relative; z-index:2; }
    #logo { position:absolute; top:41px; left:0; }
    #header-banner { position:absolute; right:0; top:63px; }
    #social-media { float:right; padding-top:7px; }
    
        /*    2.1. Top Navigation    */
        #top-navigation { height:24px; padding-top:8px; float:left; }
        #top-navigation li { float:left; display:block; margin-right:20px; text-shadow: 1px 1px 1px #000; position:relative; height:24px; z-index:100; }
        #top-navigation li a { display:block; color:#8c8c8c; }
        #top-navigation li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
    
        #top-navigation li ul { left:-20000px; position:absolute; z-index:1; top:24px; border:1px solid #000; border-top:none; width:140px; background:#121212; }
        #top-navigation li ul li { float:none; background:url(images/nav-item-bg.png) repeat-x; height:25px; margin:0; padding:9px 0 0 10px; text-shadow: 1px 1px 1px #000; }
        #top-navigation li ul li a { font-size:12px; }
        #top-navigation li:hover ul { left:0; }
    
        #top-navigation li ul li ul { top:-20000px; }
        #top-navigation li ul li:hover ul { left:140px; top:0; }
    
        #top-navigation li ul li ul li ul { top:-20000px; }
        #top-navigation li ul li ul li:hover ul { left:140px; top:0; }
    
        /*    2.2. Navigation    */
        #navigation-wrapper { position:absolute; top:156px; width:960px; left:0; }
    
        #navigation { height:46px; float:left; }
        #navigation li { display:block; float:left; margin-right:30px; position:relative; padding-top:13px; height:46px; text-shadow: 1px 1px 1px #000; }
        #navigation li a { font-size:14px; color:#FFF; font-weight:bold }
        #navigation li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
    
        #navigation li ul { left:-20000px; position:absolute; z-index:1; top:45px; border:1px solid #000; border-top:none; width:140px; }
        #navigation li ul li { float:none; background:url(images/nav-item-bg.png) repeat-x; height:25px; margin:0; padding:9px 0 0 10px; text-shadow: 1px 1px 1px #000; }
        #navigation li ul li a { font-size:12px; }
        #navigation li:hover ul { left:0; }
    
        #navigation li ul li ul { top:-20000px; }
        #navigation li ul li:hover ul { left:140px; top:0; }
    
        #navigation li ul li ul li ul { top:-20000px; }
        #navigation li ul li ul li:hover ul { left:140px; top:0; }
    
        /*    2.3. Search    */
        #search { float:right; width:163px; height:25px; background:url(images/search-bg.png) no-repeat; margin-top:7px; padding:6px 0 0 9px; }
        #search input { background:none; border:none; color:#555555; width:130px; }
     
  7. Forsaken

    Forsaken Well-Known Member

    #header
    #logo
    #navigation
    #search

    Are where you're having conflicts.
     
  8. theJay

    theJay Member

    Amazing.. that was it. I'm not sure why I didn't catch this at first, but you have my thanks. I don't even know what to say. Thank you again.
     
  9. Darfuria

    Darfuria Active Member

    I am confused as to why adding a bigger logo/banner is so difficult. I've just added a 200px high logo to my forum, and set the header logo height to 200px in the ACP, but it throws the nav out. What other heights must I change to get things to fit?
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    That's all you should need to do.
    I've just set a 200px logo on my test installation, updated the Height of Header Logo to 200px and it worked fine.
     
  11. Unistic

    Unistic Member

    Sorry to awake an old thread but this is the same problem I'm facing....

    I want my xenforo header to look like my wordpress header. I tried just using the same image but it didn't go so well. So now i'm using the Aras theme which is similar to my wordpress theme.

    But is there any easy way to use my wordpress header design on my xenforo forum.

    mysite: gamersresolve.com

    thanks!
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    What didn't work?

    All you need to do is upload the image and set the height in the ACP.

    Unless the style you're using has changed how the default header and navigation work together.
     
  13. Unistic

    Unistic Member

    Ok I found an example!!!

    http://forums.downundergamers.com.au/

    I've also tried to contact the admin with no luck just yet.

    But I'm using LeetPress wordpress theme as well as xenforo forum just like this site.

    And I want my Xenforo header to look just like the LeetPress one.

    I would offer to buy his theme for the normal price of a premium theme if I could contact him.

    But until then does anyone know how to easily achieve this it looks like he used the default theme.

    Also I only have very basic knowledge!

    thanks!
     

Share This Page