
-
AuthorPosts
-
September 28, 2015 at 11:30 am #509946
Hi,
I would like the header / logo to show like the image below. (Name to the left + centered tagline + social icons in main area).
Preferred height around 125px.http://intuitivmentor.dk/en/wp-content/uploads/2015/09/header.jpg
Do you have any suggestions on how to accomplish that?
September 28, 2015 at 1:59 pm #510075Hey AiConcept,
You should be able to place the logo and social icons like that by editing the settings under Enfold–>Header. For the item in the middle you can try adding a widget area to the header: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/. Once you’ve added it we can help you out with styling.
Best regards,
RikardSeptember 28, 2015 at 3:00 pm #510131Thanx Rikard,
I’m now a step closer – but as you can see, the widget doesn’t scroll up width the rest of the header: http://intuitivmentor.dk/en/
Also, I would like to center the menu.Im using custom pixel value in the header (200px) – and have used this CSS:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 71px;
transform: translate(-50%);
}September 28, 2015 at 4:07 pm #510207Edit:
I have now chosen logo center – and menu below, and added the following CSS:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 45px;
transform: translate(-50%);
}And also:
.html_header_top.html_logo_center .logo { left: 250px; }This all works fine – but when scrolling, the widget stays fixed – it needs to scroll, and stay on top of the menu.
-
This reply was modified 9 years, 9 months ago by
AiConcept.
September 29, 2015 at 2:24 pm #510758Hey!
I checked the site and the widget stays on top of the menu when you scroll down. Did you figure this out?
Cheers!
IsmaelSeptember 29, 2015 at 2:46 pm #510769Hi Ismael,
No – sorry.
I had disabled the header shrink.
But I don’t think the header-widget is the best option – so now I’ve tried a different approach:
Now the logo is 1024px wide – and 160px high. I removed the header widget, and made the logo width 2 images instead – one to the far left, and one centered.
The menu and logo setting is: Logo centered, menu below with the following CSS:
.html_header_top.html_logo_center .logo { left: 500px; }
This is almost like I want it, but when the screen is resized – the menu and center logo don’t line up. (the header becomes to tall)
-
This reply was modified 9 years, 9 months ago by
AiConcept.
September 30, 2015 at 5:43 am #511110Hi,
I’m not sure what going on there, everything in your header seems to disappear at around tablet size and then it comes back at phone size, was the CSS you posted earlier the only CSS you added?
Regards,
RikardSeptember 30, 2015 at 6:26 am #511122Hey!
I’m sorry but I think the widget is a better solution than combining both image. Bring back the widget then we’ll use css to adjust the position on scroll. You can use the .header-scrolled selector. Something like:
.header-scrolled .widget { //style here; }
Cheers!
IsmaelSeptember 30, 2015 at 8:39 am #511180Hi,
I have now changed it to a widget again.
When the page is scrolled, the widget stays fixed – what kind of CSS do I need to minimize the widget on scroll?
Right now, I have made a “display none” on scroll – as the site is live. ;)
The CSS I’m using right now is:
@media only screen and (max-width: 1280px) {
#header .widget {
display: none;
}}
(otherwise the widget clashes with the logo when the page is minimized).header-scrolled .widget {
display: none !important; }
(because I don’t know how to minimize the widget on scroll)#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 45px;
transform: translate(-50%);
}.html_header_top.html_logo_center .logo { left: 250px; }
September 30, 2015 at 9:49 am #511245Hi!
Try to use this:
.header-scrolled .widget img { height: auto !important; width: 50% !important; } .header-scrolled .widget { top: -12px !important; }
Best regards,
IsmaelSeptember 30, 2015 at 10:55 am #511313Hi,
Thank you so much!!! That helped a lot! :-)
I had to style it like this:
.header-scrolled .widget {
top: 23px !important;
}.header-scrolled .widget img {
height: auto !important;
width: 50% !important;
}#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 45px;
transform: translate(-50%);
}.html_header_top.html_logo_center .logo { left: 250px; }
———————–
I think it’s because I also have enlarged the social icons with this CSS:
#top .social_bookmarks li a {
width: 40px;
line-height: 32px;
min-height: 40px;
font-size: 30px;
}#top .social_bookmarks li {
height: 100%;
width: 40px;
}So I added this CSS:
.header-scrolled .social_bookmarks {
top: 23px !important;
}The only thing now, is the header height on tablet in landscape mode – it doesn’t shrink on scroll. Is there a way to fix that?
October 1, 2015 at 5:20 am #511927 -
This reply was modified 9 years, 9 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.