MyBB Community Forums

Hello,
I am trying to include a fixed navigation bar in to the forums to make it look more stylish and good but the only problem Mybb seems to be conflicting with it.

Re writting it in JQuery is not an option as I won't users to use it even if they don't have Java Script enabled/Installed and I already write this and the rest of the site is working fine with it.

So any solutions or can someone please modify the code to work with Mybb?

See By The Snapshot What It Does: http://oi59.tinypic.com/whecn8.jpg


<style>

.image {
    left: 0%;
    position: absolute;
    width: 11%;
}

#navigation {
  position: fixed;

  z-index:1;
  top: 0;
  width: 100%;
  color: #ffffff;
  height: 35px;
    text-align:center;
  padding-top: 15px;
  /* Adds shadow to the bottom of the bar */
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  box-shadow: 0px 0px 8px 0px #000000;
  /* Adds the transparent background */
  background-color: rgba(1, 1, 1, 0.60);
  color: rgba(1, 1, 1, 50);
}

#navigation a {
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    text-decoration: none;

}

#navigation a:hover {
    color: grey;
}




   ul {
        list-style: none;padding: 0px;margin: 0px;
    }
    ul li {
     display: block;position: relative;float: left;border:1px solid #000
    }
    li ul {
        display: none;
    }
    ul li a {
        display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
        white-space: nowrap;color: #fff;
    }
    ul li a:hover {
        background: #f00;
    }
    li:hover ul {
        display: block; position: absolute;
    }
    li:hover li {
        float: none;
    }
    li:hover a {
        background: #000000;
    }
    li:hover li a:hover {
        background: #000;
    }
    #drop-nav li ul li {
        border-top: 0px;
    }



#main_logo {
float:left;

}




</style>




<!DOCTYPE html>
<html lang="en-US">

<head>
    <link rel="stylesheet" href="main.css" type="text/css" />
    <title>Static Navigation</title>
</head>


    <div id="navigation">
		
         <img src="images/logo.png" class="image"  style='' 
		 > </img>
		<text id="links">
			
		<a href="index.php">Home</a>
        <a href="about.php">About</a>
        <a href="social.php">Social</a>
      
          <li style='display: inline-block;'><a href="#">Community</a>
    <ul>
      <li><a href="/forums">Forums</a></li>
      <li><a href="/news">News </a></li>
    </ul>
  </li>
  
  
        <li style='display: inline-block;'><a href="#">More</a>
    <ul>
	  
      <li><a href="donate.php">Donate</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
  </li>

  </text>
  
  
  
    </div>

Thanks!

First, this part:

    #drop-nav li ul li {
        border-top: 0px;
    }

I think that should be

    #drop-nav ul li {
        border-top: 0px;
    }

Anyway, I'm confused. In your code, you have the content of <style></style> tag before <!DOCTYPE html>. Where is placed this style sheet? In "main.css"?

Would be more useful if you could provide a link to your forum with the purpose to see the source.

Nothing is placed in main.css I am going to put the css code in there shortly once I resolve this issue. I would provide the link but the forum is down as I am changing a few things around.

This is the full code for the navigation which I am adding to the header templates.

use a different css selector so that only the new bar will be affected and not the default one. for ex. #nav-bar or #nav-manu instead of #navigation

also you need to work on the html part for consistency... something like this would be better....

<ul>
<li><a href="">Main1</a></li>
<li><a href="">Main2</a>
    <ul>
      <li><a href="">Sub1</a></li>
      <li><a href="">Sub2</a></li>
    </ul>
</li>
<li><a href="">Main3</a>
    <ul>
      <li><a href="">Sub1</a></li>
      <li><a href="">Sub2</a></li>
    </ul>
</li>
</ul>

I will try that and see how it goes Wink

think it might be conflicting with the ul li attributes for some reason I did try applying a class to each ul & li but that didn't seem to work as expected.

also to save making another thread since the theme is made by a Spanish developer I am trying to translate each template to english. I notice the showthread each options (Edit Post etc) is in Spansh what templates would all that be in couldn't find it anywhere in Mybb.

Managed to solve the issue, Instead of using the plain ul li {} I added A #navigationn to every ul li in the CSS so it won't conflict with the rest of the forum.

Just need to figure out of editing the showthread links now.

(2014-07-13, 09:23 AM)Spudster Wrote: [ -> ]I will try that and see how it goes think it might be conflicting with the ul li attributes for some reason I did try applying a class to each ul & li but that didn't seem to work as expected.

also to save making another thread since the theme is made by a Spanish developer I am trying to translate each template to english. I notice the showthread each options (Edit Post etc) is in Spansh what templates would all that be in couldn't find it anywhere in Mybb.

yes it will affect all ul li present in the board unless you specify it to affect only one.. for ex: instead of just (ul li a) use (#nav-bar li a)

check the postbit template to edit the buttons found in the post like edit, delete etc.

Thanks just navigated in the postbit templates they appear to be all there only thing I need to do now is change them to english.

Thanks again for your great help to you all Wink

Spudster

Flavius Popa

Spudster

mmadhankumar

Spudster

mmadhankumar

Spudster