Forum Replies Created
-
Posts
-
Morning Yigit
Thanks for the Quick CSS.
Appreciate your help.
However, i added and there seems to be no change.
Have i done it correctly?
RichSorted. For others, god knows how i did it:
body#top.single.single-post .breadcrumb {
visibility: visible;
background-color: #FFFFFF;
}
body#top.single.single-post .title_container {
background-image: url(https://www.thenaturalpharmacie.co.uk/hidden/wp-content/uploads/2013/08/header-fennel.jpg);
background-repeat: repeat-y;
background-position: left top;
background-color: #759abd;
}
body#top.blog.logged-in.stretched.open_sans div#wrap_all div#main div.stretch_full.container_wrap.alternate_color.light_bg_color.title_container {
background-image: url(https://www.thenaturalpharmacie.co.uk/hidden/wp-content/uploads/2013/08/header-fennel.jpg);
background-repeat: repeat-y;
background-position: left top;
background-color: #759abd;
}
body#top.blog.logged-in.stretched.open_sans div#wrap_all div#main div.stretch_full.container_wrap.alternate_color.light_bg_color .breadcrumb {
visibility: visible;
background-color: #FFFFFF;
}Hi Dude
That’s great. Got it to work on iphone.
However, after following your “media query custom css”, just cant get an ipad to act like the desktop resolution. (See below and scroll, logo shrinks small & not vital, naviagtion decreases in height. Happy for a work around.)
http://www.thenaturalpharmacie.co.uk/hidden/about/our-approach/
Thanks again
Rich
PS: Dosent need to “Resize” as such, just set to a smaller size.
Heres my tests. But im not sure what im doing!
Hence why it dosent work.
/* Mobile */
@media only screen and (max-width: 768px) {
div .logo img {
position: relative;
height: 100px;
width: 140px;
}
/* Ipad */
@media only screen and (max-width: 989px) and (min-width: 768px) {
div .logo img {
position: relative;
height: 100px;
width: 140px;
}
Hi Ismael
Thanks for your reply.
Was just writing this morning, to say i’d ditched that idea. (Over complicated) So don’t worry, but appreciate support.
My only question is now, can i get the logo to resize to a set size on an Ipad.
Heres the code you kindly helped me with on a desktop.
If i manage to work out, i’ll update this post.
.header-scrolled div .logo img {
height: 70px;
margin-left: -5px;
}
Rich
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
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
Sorted MOBILE, added div
@media only screen and (max-width: 768px) {
div .logo img {
position: relative;
height: 100px;
}
}
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
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;
}
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
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
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
