My forum logo image is stuck on top for some reason

[Weatherflower]

This is my forums: http://playground.uk.ms/

There is something wrong with the forum logo, it doesn't show up.
I tried stuff like adding margin, padding, etc, but it still the same, min-height and min-width didn't work out either.

This is how the body-css looks like:

body {
 background: url("http://playground.uk.ms/images/bg.jpg");
background-attachment: fixed;
color: #333;
text-align: center;
line-height: 1.4;
margin: 0;
font-family: 'Rubik', sans-serif;
font-family: 'Poppins', sans-serif;
font-size: 13px;
overflow-y: scroll;
}

Logo settings is in the forum board, I even tried this:

But the logo still does not show up fully. But I get the same experience by that:

#content {
    background: url("http://playground.uk.ms/images/forum_logo.png") !important;
}
#logo {
    background-color: #ccc !important;
    background-image: url("http://playground.uk.ms/images/forum_logo.png") !important;
}

Since I've tried everything else now since 1 day ago I need you guys help

Elsewise mybb is a great forum system, and we got to celebrate this since its good technology, everyone should try it out since its good.

[MattyWjeisz]

I'd say it's because the logo is considered a fixed background image. Can you show me a screenshot of the way it's displaying for you?

[Weatherflower]

I'd say it's because the logo is considered a fixed background image. Can you show me a screenshot of the way it's displaying for you?

Here is the logo how it looks like for me:


The URL to the image is this: http://playground.uk.ms/images/mybb_forum_problem.png

I want the logo not to get stuck, and I want the menu right under the logo, but how do I achieve this?

[Taylor M]

You're logo is currently contained within a flex based header system.

You would need to move the logo div out of the flex area.

Find this code:

<div class="logo-box">
	<a href="http://playground.uk.ms/index.php" class="logo"><img src="http://playground.uk.ms/images/forum_logo.png" alt="Playground Forums" title="Playground Forums"></a>
</div>

And move it just above this line of code:

<div class="top-nav-st">

[Weatherflower]

You're logo is currently contained within a flex based header system.

You would need to move the logo div out of the flex area.

Find this code:

<div class="logo-box">
	<a href="http://playground.uk.ms/index.php" class="logo"><img src="http://playground.uk.ms/images/forum_logo.png" alt="Playground Forums" title="Playground Forums"></a>
</div>

And move it just above this line of code:

<div class="top-nav-st">

Awesome coding skills you have   It did solve a little of my problems, but the logo is still stuck:


This is my code now:

	<header class="content-bg">
   		<div class="top-nav-st">
           <div class="logo-box">
				<a href="{$mybb->settings['bburl']}/index.php" class="logo"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
			  </div>
			  <div class="search-box" id="none">
				  	<ul class="menu" id="none">
					<li class="nr1"><a href="{$mybb->settings['bburl']}/index.php"  >Hem</a></li>
					<li class="nr2"><a href="{$mybb->settings['bburl']}/memberlist.php">Medlemslista </a></li>
					<li class="nr3"><a href="{$mybb->settings['bburl']}/regulations.php">Regler </a></li>
					<li class="nr4"><a href="{$mybb->settings['bburl']}/contact.php">Kontakta oss </a></li>
					<li class="nr5"><a href="#"> Inloggad</a></li>
				</ul>

			  </div> 
			</div>
			<div class="left-flex">
			<div class="right-flex" id="none" style="display:flex;">

I fixed the menu a bit better, But the logo is still stuck. :/ thanks for the help, i wouldnt have fixed it by myself.

[PARADOX987]

you can do it with css

give a appropriate width to logo img