Header HTML/CSS causing errors w/ navigation bar

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.
 

Attachments

  • headerwithouterror.webp
    headerwithouterror.webp
    30 KB · Views: 21
  • headerwitherror.webp
    headerwitherror.webp
    38.5 KB · Views: 23
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.
 
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.

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">
 
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">

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.webp

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

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).

My guess is it's something to do with CSS positioning. Look for any positioning attributes in your CSS.
 
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; }
 
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; }
#header
#logo
#navigation
#search

Are where you're having conflicts.
 
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?
 
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.
 
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!
 
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.
 
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!
 
Top Bottom