Own Theme – why is navigation hidden?

If you look in style.css and look for

.blog #navi, .page #navi

you will see

margin-top: -550px

which means this is being moved 550px upwards and so is off the screen at the top.

Change this to say 10px or 50px and it will appear on your screen and you can adjust to the position you want it.

OMG thank you SO much – you saved my life!
I was trying to solve this for like 3 hours, but somewhen you get blind and not even the snowy weather outside could refresh my mind…
I already wondered why there had to be so much margin-top to see it in the right position *mysterious*

Well often it′s just the simple things … ??

Thank you again!

Oh no!
I just have another problem again!
If i change that, its like in a fixed position, so it′s not moving like the other elements if you change the size of the window.
Had that before .. ;/

Glad that fixed it! If you look in that same section of style.css you will see it says:

position: absolute;

That’s what positions it in the same position regardless of the other elements on the screen. You can change that to

position: relative;

but will then need to change the left attribute and also change margin-top to just top and play around with those numbers to position it.

This will then cause further issues with the whole site layout of the theme and would be better off contacting the theme author to make changes like this as it will snowball a little into needing more and more CSS changes until it’s eventually lookin right.

Oh no!
The problem is, that I made the whole thing myself, but I am not experienced at all, so I feel a bit lost now. ;/

I tried to change positions but it didn′t help – just made it worse.
I don′t get it, why everything is in place except the navi.
I thought I can use the background (blue box) as position:relative – element and the other things on top (logo, content, navi) as position: absolute;

I mean it IS in place (vertical)! I just don′t get it why the navi is not behaving/moving like the other elements.

It’s not moving because of the positioning.

I would recommend creating a container div and setting that to the width you want your site, just a example but after body have:

<div id="container">

Then inside there have

<div id="navi">

and

<div id="contentbg">

like you have now, and remember to close the container div at the end.

In your CSS set the width of the overall container and set the widths of the navi and contentbg that make up the full width of the container. Remove all the positioning and margins of those two divs and simply set the width and navi to float: left and contentbg to float right.

This site will help: https://learnlayout.com/position-example.html

There are lots of examples on there.

Thank you!
I tried it again and now it seems to work.

I used the following:

#navi { position:absolute;
	 z-index:1;
	 top: 50%;
	 left: 50%;
	 margin:160px auto 0 -350px;
	 height:422px;
	 width: 160px;}

But who knows… I already thought it works for like 3 times and then another error occurred.
I close this now – I hope that′s it! ??

Great!