RE-POSITIONING HELP PLEASE

bishoyscopticblog · Member · Jan 27, 2015 at 10:55 pm
Copy link

Add topic to favorites
Hi

how do i move my header image above the menu?

how can i center my menu so it looks even

how can i prevent my menu from going over two lines in the ipad view

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Jan 28, 2015 at 8:53 am
Copy link
Could you remove this existing rule:
```
.main-navigation {
    position: relative
}
```
and add
```
.main-navigation {
    position: absolute;
    top: 295px;
    left: 286px;
}

div#main {
    margin-top: 50px;
}
```
To center the menu keep adjust the left value above.
In the iPad I see your menu items in a single row. I wonder if you had more menu items earlier.
bishoyscopticblog · Member · Jan 28, 2015 at 10:19 pm
Copy link
Thanks what about the header?

is there a way to get the full menu on my iphone, because if i dont have the mobile theme it just shows me a small menu button and when i press it all the links come down?
staff-happychia · Staff · Jan 29, 2015 at 8:56 am
Copy link
The CSS I gave you earlier will push the header to above the menu.

i dont have the mobile theme it just shows me a small menu button and when i press it all the links come down

That’s how mobile themes are designed to accommodate menu on smaller phone screens.
bishoyscopticblog · Member · Jan 29, 2015 at 10:45 pm
Copy link
i have followed your code and disabled the mobile theme and now i cant see the menu at all on my iphone
bishoyscopticblog · Member · Jan 29, 2015 at 11:16 pm
Copy link
i mean all i see is the word menu …..can i get it to look like the desktop site?
bishoyscopticblog · Member · Jan 30, 2015 at 4:22 am
Copy link
also when input the above code it makes the menu move half way down on the ipad
staff-happychia · Staff · Jan 30, 2015 at 9:48 am
Copy link
Let’s include the previous style I gave you in a media query:
```
@media screen and (min-width: 992px){
.main-navigation {
    position: absolute;
    top: 295px;
    left: 286px;
}

div#main {
    margin-top: 50px;
}
}
```
This way, menu moves above the header only on desktop screens. Menu on the tablets and iPhone screens will remain as it is now.

i mean all i see is the word menu …..can i get it to look like the desktop site?

This is how menu is designed to display on smaller screens. I don’t know how to change it to display full menu like on desktop.

also when input the above code it makes the menu move half way down on the ipad

Please use the CSS in this update that has media query. This way the menu behavior on iPad will remain will remain as it was before adding this CSS.

And please don’t forget to remove the following custom CSS rule you currently have.
```
.main-navigation {
    position: relative
}
```
I am really sorry, I could not be more helpful.
bishoyscopticblog · Member · Jan 30, 2015 at 9:57 am
Copy link
Thanks for your help ….maybe ill start a new thread and wordpress staff may help

No items found.