-
Posts
-
Hi there
Great theme.
Is it possible to force the logo to overlay over ALL elements, to the top?
Heres my site
http://www.thenaturalpharmacie.co.uk/hidden/
And heres my custom CSS that doesnt work
logo img
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: block;
width: 230;
height: 230;
max-height: 250%;
z-index: 10000 !important;
}
1) You must add px or % to your width/height attribute. Just 230 is not a valid syntax and it must be 230px or a % value.
2) You can’t do this if your logo has a relative position. A solution would be to set the position to “fixed” with following css code
.logo img {
position: fixed;
width: 230px;
height: 230px;
}Maybe you need to use a media query to set the position to “relative” on small screens – otherwise the logo is not “responsive”.
@media only screen and (max-width: 768px) {
.logo img {
position: relative;
}
}Yes you can use the header-scrolled class to resize the image as soon as the user scrolls down. However it will “jump” a bit and you won’t get the same nice resizing effect with a fixed logo. Use following code to determine the “small” logo dimensuions
.header-scrolled .logo img {
width: 100px;
height: 100px;
}Thanks Dude
Really appreciate your help.
Sorry to ask.
I followed your advice and added
.header-scrolled .logo img {
width: 100px;
height: 100px;
}
as a custom css
But sadly its not resizing.
Ive tried on Firefox & safari on a mac.
http://www.thenaturalpharmacie.co.uk/hidden/
Hope you can help.
As if this works, then this theme is goin to be perfect.
Rich
Hi Dude
Thanks gain for your help.
Sadly, still dosent resize.
Happy to pay you.
Alternatively, if we can fix – i think this will help many others as there are quite a few questions about logo, size position & this would help solve.
Really hope you can help, as this is the crucial point of whether i use this theme or revert back to my tried & tested nevada theme. I just want to persevere & then i can confidently use this theme for clients in the future as there are more features: css animations, sticky header etc.
Rich
Morning Ismael
Any further thoughts on how to get the logo to resize?
Im soo close.
Really hope you can help.
After this i think i can do all the rest myself.
Rich
Hey!
Please try to remove the width attribute and just change the height
.header-scrolled div .logo,
.header-scrolled div .logo img {
height: 100px;
}Regards,
Peter
Hi Peter
I was so pleased / relived you replied & eager to try your code out.
Sadly, it still just doesnt want to scale.
Below is my custom css code.
Do you think its possible via CSS?
Happy to pay you, if its taking too much time.
As always, really appreciate this excellent support.
Rich
/* Pages */
.page-id-5 .title_container {
display: none;
}
.logo img {
position: fixed;
}
@media only screen and (max-width: 768px) {
.logo img {
position: relative;
}
.header-scrolled div .logo,
.header-scrolled div .logo img {
height: 100px;
}
Hey!
A curly bracket seems to be missing – try
div .logo img {
position: fixed;
}
.header-scrolled div .logo,
.header-scrolled div .logo img {
height: 100px;
}
@media only screen and (max-width: 768px) {
.logo img {
position: relative;
}
}Regards,
Peter
Peter
Last thing. Work great on desktops.
1) IPAD: Is there a custom css that will work on ipad, landscape
2) MOBILE: Is it there a custom css that will change the logo from “Fixed” so it scrolls up with page on mobile.
Im going to try myself, thought id ask as it may take me a few hours of trial & error.
Thanks again.
Rich
Hi Peter
Sorted MOBILE, added div
@media only screen and (max-width: 768px) {
div .logo img {
position: relative;
height: 100px;
}
}
Hi Peter
Nearly there. And thanks to your teams help.
Ive worked out a way / fix to add a horizontal version of the logo as a background image.
However, it seems to repeat in two other places.
Is there a way to remove from behind menu & search panel / on click?
Here’s the live site: http://www.thenaturalpharmacie.co.uk/hidden/
Here’s a screenshot: https://dl.dropboxusercontent.com/u/226695/smallheader-example-tile-error.gif
Thanks in advance. Rich
Below is my custom css
/* Pages */
.page-id-5 .title_container {
display: none;
}
/* Header */
div .logo img {
position: fixed;
padding: 0px;
top: -2px;
}
.header-scrolled div {
background-image: url(http://www.thenaturalpharmacie.co.uk/hidden/wp-content/uploads/2013/08/tnp-smalllogo-header3.gif);
background-repeat: no-repeat;
background-position: left top;
}
.header-scrolled div .logo img {
height: 75px;
}
#header_main {
border-bottom-width: 8px;
border-bottom-style: solid;
border-bottom-color: #060;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
/* Naviagtion */
/* Mobile */
@media only screen and (max-width: 768px) {
div .logo img {
position: relative;
height: 100px;
}
Hi Peter
Nearly there. And thanks to your teams help.
Ive worked out a way / fix to add a horizontal version of the logo as a background image.
However, it seems to repeat in two other places.
Is there a way to remove from behind menu & search panel / on click?
Here’s the live site: http://www.thenaturalpharmacie.co.uk/hidden/
Here’s a screenshot: https://dl.dropboxusercontent.com/u/226695/smallheader-example-tile-error.gif
Thanks in advance. Rich
- The topic ‘Logo ontop of all layers?’ is closed to new replies.