Putting the Menu beside my logo (not below it, as default) « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Choices

not resolved

Putting the Menu beside my logo (not below it, as default)

20 posts from 4 voices

Started 10 months ago by Wyko
Latest reply from Ismael
This topic is not resolved

Tags:

No tags yet.

Wyko
Member

I've just been running into things left and right, haha. What I want right now should be simple, I think, but I can't make heads or tails of the header.php where I think the solution lies.

I'd like the menu to be situated next to the logo, rather than below it. That should save a good fraction of an inch of screen space. For demonstration, I mocked up how I'm hoping it will look:

http://imgur.com/a/52gEB

And now that I look at it, I could even skip out on the "Home" link entirely. the logo would serve perfectly. Can anyone please suggest a solution?

Posted 10 months ago #
Wyko
Member
... Posting here is like calling the IT guy; you can't figure it out untill you call him, but as soon as you do the problem clears up. Here's my solution:

I put this into custom.css
```
.main_menu {
    top: -47px;
    left: 190px;
}
```
Adjust those values to put it nicely next to the logo.

All that's left now is to figure out how to adjust the header height to make it all look good.
Posted 10 months ago #
Devin
Moderator

Hey Wyko,

Glad you were able to figure it out :)

To adjust the header, you'll probably need to add a height: to #header .container_wrap and adjust some of the other elements within the header. I know the #header .container has a min height of 160 so that will need to be changed or removed at the very least.

Good luck and let us know if you have any issues.

Regards,

Devin

Posted 10 months ago #
Wyko
Member

The header height is actually turning into something on a problem. The various solutions I've seen to reduce the container height of the header make a white bar appear above the slider and below the header, exactly as big as the space I've shortened the header. Annoying...

Posted 10 months ago #
larsdaniel
Member

You are not the only one who has had problems with header heght and logo/menu placement. It would be killer to have some easy-to-use parameters in the backend.

Posted 10 months ago #
Wyko
Member

Devin; I tried what you posted, and not much happened. Only a rnadom blue line appeared right at the height I want the header to be shortened to. I made a screenshot of the layout.css and the page:

http://i.imgur.com/5XVCJ.png

Posted 10 months ago #
Ismael
Moderator
Hey,

Please remove the changes made on your header then try this snippets.
```
div .logo {
padding: 0px;
clear:none;
}

.main_menu {
top: 55px;
left: 15px;
}
```
Regards,
Ismael
Posted 10 months ago #
Wyko
Member

Ismael;

That didn't work very well, I'm afraid. The padding at the top of the logo is fine, and as you can see from the previous screenshots I've figured out how to move the menu to where it needs to be. The problem is the space underneath the logo, which needs to be about as much as the space above it.

Here's what happened after adding your code: http://imgur.com/nGmyM

Thanks for your contribution though! I hope we can work this out eventually.

Posted 10 months ago #
Wyko
Member

To recap for everyone: I need the header height to be about 140px without breaking the theme. Anyone?

Posted 10 months ago #
Ismael
Moderator
Hi Wyko,

Try to add this code:
```
#menu_container {
   height: 140px !important;
}
```
if that doesn't work, try to use this one instead:
```
#menu_container {
   height: 140px !important;
   min-height: 140px !important;
}
```
Hope this helps. :)

Regards,
Ismael
Posted 10 months ago #
Wyko
Member

Hey Ismael! Thanks for your reply; it's the best solution yet, since it's gotten the best looking results.. However, there are still a few issues with the layout.

For reference: http://imgur.com/a/En4SL#0

I had to use the Min-distance version to get it to shrink properly. After using it:

- The slideshow grew something like 25 pixels higher than the image inside of it
- The "Support Hotline" is placed in the middle of other content in the mobile layout
- The breadcrumb bar grew much too large and off-center.

Thanks for your work!

Posted 10 months ago #
Ismael
Moderator
Hi Wyko,

For the slideshow and breadcrumb, try to use this code:
```
#top #slideshow_big, #main {
   top: -38px !important;
}
```
Just adjust the top value.

For the Support hotline, use this code:
```
.small_header_info {
   right: 250px !important;
}
```
Just adjust the right value. Increasing the value pushes the Support hotline to the left.

Hope this would help you. :)

Regards,
Ismael
Posted 10 months ago #
Wyko
Member

Wow, that looks like it completely fixed the normal width version the the site! I love what that looks like :)

The mobile version, though, is still wrong. The code you gave for the support hotline pushed it out of the way, but not where it needed to go. Also, the breadcrumbs in the mobile version still have a gap space.

http://i.imgur.com/cqHzC.png

at http://www.getgeek.org/temp

Posted 10 months ago #
Wyko
Member

Ismael: Your advice has been great so far, and I really appreciate your help.

How about this to maybe make it simpler: Can we just make the mobile version's layout the way it is in the original, without the modifications that the wide version gets? Maybe that would fix this.

Posted 10 months ago #
Wyko
Member

Hmmm... also, there's a white bar at the very bottom of the pages now. To be honest I don't really care about it much, but if you have a quick idea about it, that would be nice.

Posted 10 months ago #
Ismael
Moderator
Hi Wyko,

Kindly open wp-content/themes/choices/css/layout.css, and find this line of code:
@media only screen and (max-width: 767px) {
paste this code below it:
```
#top #slideshow_big, #main {
   top: -80px !important;
}

.responsive .header_meta .small_header_info {
   top: -220px !important;
   text-align: right !important;
   font-size: 9px !important;
}
```
Hope this fixes the mobile issues. :)

Regards,
Ismael
Posted 10 months ago #
Wyko
Member

Almost! check out http://www.getgeek.org and squeeze the page really tight. The phone number overlaps the logo. I think changing the width of the number so that it line wraps beside the logo would fix it, but changing the width just move is to the left.

Also... That white bar at the bottom is a bit more annoying than I thought it would be. Is there anything we can do about it?

Posted 10 months ago #
Ismael
Moderator

Hi Wyko,

As of now, I am not sure on how to get rid of it. :(

Regards,
Ismael

Posted 10 months ago #
Wyko
Member

Aye. Well, think on it if you can. I'll post back here in a week or two in the hope you'll have any new ideas. In the meantime, I'll poke around as well.

Posted 10 months ago #
Ismael
Moderator

Hi Wyko,

Thanks, I'll be sure to post here if I can find a solution to it.

Regards,
Ismael

Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top