Positioning menu at the top

[tiziani]

Hello from Bavaria/Germany,

we bought the Xtreme Plus Theme. – It’s great but not really easy to handle.

Here is the page I try to build:

http://alarmsystemebaum.homepage.t-online.de/wordpress/

I want 2 things with the menu at the top:

1) it should be centered with the BAUM-logo (now on the left side)

2) the menu shoud be at the bottom of this gray box

Is that possible?

Thank you in advance 

and greetings from Bavaria

Marcel

[scrambler]

I am not clear about what you mean by 1-

You have set your site to a very large width, so are you saying you want the menu and logo to be constrained to a smaller width and centered?

If so, I noticed you set your menu bar to have a fixed width of 1200px, which is a very bad a idea because if breaks responsiveness. What you want is a max-width of 1200px and a margin:0 auto to center it.

I am sure where you entered the width:1200px rule, but instead of that you want is

{max-width:1200px;margin:0 auto;}

about 2-, in order to keep things responsive when the menu bar will stack under the logo, you can try to add the rules below in Main options > Fonts & Custom Custom CSS Rule box

.menu-primary .wvrx-menu-html {margin-top:-50px;}

and changed the previous rule to add the same top madding value as this margin

{max-width:1200px;margin:0 auto;padding-top:50px;}

[tiziani]

Thank you for your answer.

It works really good with it.

I have two more questions regarding my layout.

1) Can I have the logo more adaptive? The logo getting smaller with the browser-window?

The width definition in % doesn’t work.

2) I want the primary-widget-area (in light blue) not to stick to right window edge but be centered with the content (stick right to the content-div). Is that possible?

Thank you.

Marcel

http://alarmsystemebaum.homepage.t-online.de/wordpress/

[scrambler]

1) The percentage size needs to be on the logo container.

try adding the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

.wvrx-menu-html {width:25%;}

2) If what you want is the content and sidebar to be less wide than the header and centered, you need to change the way you handled the content.

Right now you reduced and centered the content itself using

#content .entry-content{max-width:720px;margin-left:auto;margin-right:auto;padding-left:2%;padding-right:1%;}

What I suspect you want is remove that, and instead   put a value in Main Options > Wrapping areas > Container Area > Max Width box, and select center for alignment right above that 

[tiziani]

Everything works fine now.

Thank you very much.

[Author]

Posts