Reduce header height and move menu to top « Support Forum | Kriesi.at

Support Forum » Choices

Reduce header height and move menu to top

16 posts from 6 voices

Started 11 months ago by larsdaniel
Latest reply from Ismael
This topic is not a support question

Tags:

larsdaniel
Member

I can´t figure out what is keeping the header from being reduced is height. I tried adjusting with the min-height variable, but something is keeping it from going to the min-height I set. (Right now it is set to 10px just for testing).
I am aiming at a height that leaves as much space under the logo, as there is now above the logo.
Also I want to move the menu up the the upper edge of the header. I found out how to move it to the right, but not how to move it up.

A big thanks :-)

(Oh, my work in progress is here: http://www.thevelvetroom.dk )

Posted 11 months ago #
jwferne
Member

Can't help much on the coding, but your job seems like a most pleasurable one!

Posted 11 months ago #
larsdaniel
Member

Haha! *humming*: "Nice work if you can get, and you can get it if you try."

Posted 11 months ago #
larsdaniel
Member

Ok, now I have positioned the menu like i want it, but I have this white space between the header and the slideshow that I just can´t figure out how to get rid of.
Anyone?

Thanks!

Posted 11 months ago #
larsdaniel
Member

Please ? :-)

Posted 11 months ago #
Dude
Dude
Hi!

Try to add following code to css/custom.css:
```
.main_menu {
    top: -73px;
}

div .logo {
    height: 65px;
}
```
Regards,
Peter
Posted 11 months ago #
larsdaniel
Member

Thanks, that worked!

Posted 11 months ago #
Dude
Dude

Hi!

Glad that I could help you :)

Best regards,
Peter

Posted 11 months ago #
mishka48
Member

Hi!

I tried to do the same, but can't achieve result that I need. Can you take a look: http://webart21.ru/
I need to reduce header container size to 100px. (remove this empty space under menu). Then I want to completely remove search box and align social share icons to the right side.
And excuse me for one more question: I'm planning to install WPML, where is the place for WPML flags in theme? Are they appears in menu or near social icons?
Excuse my poor English.

Kind Regards

Posted 11 months ago #

Ismael
Moderator

Hello mishka48,

Drop this on your custom.css

#header .container {
min-height: 100px;
z-index: 100;
overflow: visible;
background: none;
height: 100px!important;
}

div .logo {
padding: 0 0 20px 0;
min-height: 100px;
margin-bottom: 0;
padding: 0;
}

.main_menu {
bottom: -30px;
}

#searchform {
position: relative;
float: left;
margin: 0;
min-width: 173px;
display: none;
}

Regards,
Ismael

Posted 11 months ago #

mishka48
Member

Thanks, that worked!

Posted 11 months ago #
Ismael
Moderator

Hi mishka48,

Glad that we could help you. :)

Cheers,
Ismael

Posted 11 months ago #
SylD
Member

Hello, I'd like to try to move the menu to the right of the logo as well, in order to cut down on blank space. I'm nervous to try this on my own as this is the second thread I've read where there were issues with white space, etc. I'm good at following directions though. Can anyone please give me a quick step by step of which files to edit & how? Much appreciated!
~Syl

Posted 8 months ago #
Ismael
Moderator
Hi Syl,

Try to add this code in your Quick CSS or custom.css:
```
.main_menu {
   position: absolute;
   bottom: 30px;
   margin-left: 360px;
}
```
Just adjust the bottom value(the higher the value, the more it is pushed upwards) and margin-left value(the higher the value, the more it is pushed to the right). Hope this helps. :)

Regards,
Ismael
Posted 8 months ago #
SylD
Member

Hi, it worked perfectly when I pasted it in just as you had it. Thank you so much!

~Syl

Posted 8 months ago #
Ismael
Moderator

Hi Syl,

Glad that we could help. :)

Cheers,
Ismael

Posted 8 months ago #