-
Posts
-
Hello Kriesi Team,
I’m working on a new website for my company and wanted to see if there was an easy way to move the logo down like the screenshot provided.
– Hope to hear from you soon
Hey bobthechiropractor,
Please try the following in Quick CSS under Enfold->General Styling:
span.logo { position: absolute; bottom: 5px; }Best regards,
RikardNice to meet you Rikard, thanks you for getting back to me so quick. The code has been added but I yet to see a change. I see the desired result occurs when I change the code to the code below. How would I reduce the space between the top of my logos head and the top of the browser window – essentially I would like to shrink the header but keep the logo the same size while also keeping the menu items center. I included an updated screenshot of this as well to better show what i’m trying to achieve.
span.logo { position: absolute; bottom: -12px; }Hi bobthechiropractor,
You can set the custom header height in pixels in the theme options.
If you need further assistance please let us know.
Best regards,
VictoriaThank you for this Victoria and nice to meet you, I looked at those settings and do not see any way to set the requested. No matter what size I set the header there is no way to adjust the space between the top of the logo and header. Ideally I would like that reduced like the screenshot I provided with the logo the same size. Furthermore I would to have the menu brought down a smidgeon to line up better with the logo. Would you need any more screenshots to better understand what I’m trying to achieve?
Hi bobthechiropractor,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width:768px){ #top .inner-container { margin-top: -13px; } .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 77px; } }If you need further assistance please let us know.
Best regards,
VictoriaThank you for that code Victoria. It indeed helped with some of the requested. I did have to adjust some of the numbers but it was very helpful. I did notice a couple of things. There is now a white line under my menu – how would i resolve this? The navigation menu and social icons are also not centered – they are slightly higher than needed. Would it possible to get some code to tweak those elements?
Hi bobthechiropractor,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 80px !important; }
They seem to be aligned on my end.If you need further assistance please let us know.
Best regards,
VictoriaHappy Thursday Victoria, That you for that new code for the white space below the header. On desktop things seem to be working correctly now. On tablet and mobile view there is now a huge patch or white space. Would it possible to get some code to tweak those elements? For the Menu navigation I was hoping would be vertically aligned better. I provided a screenshot to show you that things are not even. I would like the same amount of space from the top of the header to the text and the bottom of the header to the text.
Hi bobthechiropractor,
You should wrap the code in the media query as the code above, so that it does not break things on smaller screen sizes.
Please try using this code for social icons:
@media only screen and (min-width:768px){ #top nav .social_bookmarks { margin-top: -12px; } }Best regards,
VictoriaGreeting Victoria, what do you mean exactly by “wrap the code in the media query as the code above.” Did the code you provided include the vertical menu centering as well as social icons?
Hi bobthechiropractor,
I meant use this code like this:
@media only screen and (min-width: 1024px) { .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 80px !important; } }And the code I gave you before is to adjust the icons, yeah. You can play with the value for the margin-top to put the icons where you need them.
Best regards,
VictoriaThank you for getting back to me how would I adjust the menu as well, I would like both items centered vertically. The white space is still showing on my mobile and tablet view. How would this be solved as well?
Hi,
Sorry for the late reply, to remove the white space from your mobile & tablet-sized screens, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:@media only screen and (max-width: 989px) { .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 0px !important; } }To have your clients face show in the second section on mobile & tablet, try adding this css like this:
@media only screen and (max-width: 989px) { .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 0px !important; } #av_section_1 { background-position: -190px center !important; } }Best regards,
MikeHello Mike, no worries about the wait. After adding the first code the white space is still showing on mobile and tablet.
Hi,
Thanks, it looks like you still have this css active:.html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 80px !important; }Please look for this in your custom css and remove it or change it to this:
@media only screen and (min-width: 768px) { .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 80px !important; } }Or please include an admin login in the Private Content area so we can investigate.
Best regards,
MikeNice to hear from you Mike. I replaced that code you suggested. It seems to clear up some of that random white space but unfortunately it still shows up on some tablet views. I’ve included a username and login for you so you can investigate further.
- You must be logged in to reply to this topic.