Forum Replies Created
-
Posts
-
Don’t worry, I solved it by adding a new (bigger) image size category to the Easy Slider menu options, using htis code in my functions.php
add_image_size( ‘banner’, 1920, 671, true );
So it’s all fine now.
Hi Victoria,
Thanks for your response. I don’t think that the flyout menu covers the search icon because I can still tap the search icon when the fly-out menu is open and get the search bar to pop up.
Either way, could you give me the JavaScript code that can change this, ie. change the colour to black?
Thanks so much!Hi Nikko (or anyone),
Would it be possible to please get some help on my final questions above?
Thanks!Hi Nikko (or anyone),
Would it be possible to please get some help on my final question above – how do I make the search icon turn black when it’s against the white fly-out menu in the mobile phone version?
Thx!Hi Vinay,
Thanks for your reponse.
So I posted this code from the Enfold logo documentation into my Quick CSS field in General Styling:
@media only screen and (max-width: 989px) and (min-width: 768px) {
#top .logo ,
#top .logo a {
max-width: 60% !important;
width: 60% !important;
height: auto;
}}(I only want the logo to be resized on the tablet version, so I tweaked the Media Query dimensions and left out the general logo resizing code for the desktop version.)
I also disabled “merging and compression” for CSS and JS files.
I also checked and I don’t have a caching plugin installed.
And I cleared the cache on my tablet’s browser (and on my desktop version just in case).But still no luck. The logo is the same size.
Any suggestions what to do now?
Note: I also have this custom CSS earlier on i.e. higher up in the Quick CSS field:
@media only screen and (max-width: 767px) {
.logo, .logo a, .logo img {
max-height: 50px!important; }
.responsive .mobile_slide_out .logo img {
margin-left: -30px!important; }}@media only screen and (max-width: 480px) {
.logo {
position: relative!important;
top: 13px!important;
}
#header_main .inner-container {
height: 120px;
}}Could that be messing with things?
Hi,
I tried the CSS code from this thread, and from these two threads:
But none of them worked.
My problem is excatly the same as that of this thread: the logo overlaps the left-most menu item on the tablet (in portrait mode).
Except that I would probably prefer to reduce the logo size in the tablet version only (instead of reducing the menu padding in the tablet version).Any further ideas?
Hi Nikko,
Brilliant stuff, both your solutions worked! Thanks!
Just one more thing: on the mobile phone, the search icon is still white when the fly-out menu comes out, and so you can’t see it against the white fly-out menu. How do I make the search icon black in this case?
That worked! Brilliant stuff, thank you Nikko! And thanks for being so quick.
I just saw however that there’s another problem now.
On the mobile phone in portrait mode, everything is great. But in landscape mode, the title text goes off the screen on the left and the caption text is completely cut off again (can’t see it at all).
And on the tablet it’s the opposite. In landscape mode everything is great, but in protrait mode the title text is fine but the caption text, while still partly visible, gets cut off at the bottom.
The one exception on the tablet is the homepage: both in landscape mode and in portrait mode the text is getting cut off. (There’s more text here, so I guess that makes sense.)And one last piece of custom CSS that I’ve got rattling around in my General Styling tab … I’m not sure what it even does, but I’m just adding it in case:
.push-right{
position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
}
@media only screen and (max-width:767px) {
.push-right{
position:relative;
right:auto;
transform:none;
}}As an FYI, here is everything I currently have in my Quick CSS the relates to the mobile header:
@media only screen and (max-width: 989px) {
.avia_transform .av_slideshow_full .avia-caption-title {
font-size: 1em;
}.avia_transform .av_slideshow_full .active-slide .avia-caption-content {
font-size: 12px;
}.av_slideshow_full li img {
min-width: 900px;
margin-left: 15px;
}@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background-color: transparent;
position: absolute!important;
}}
.slideshow_caption .slideshow_inner_caption {
top: -40px;
}
}@media only screen and (max-width: 480px) {
.logo {
position: relative!important;
top: 13px!important;
}
#header_main .inner-container {
height: 120px;
}}@media only screen and (max-width: 767px) {
.avia-caption-content {
display:none !important;
}
.responsive #top .slideshow_caption h2 {
font-size: 32px !important;
margin-left: -53px!important;
}
}As an FYI, here is everything I currently have in my Quick CSS the relates to the mobile menu:
#av-burger-menu-ul li a:hover {
background-color: #bfbfbf !important;
}@media only screen and (max-width: 767px) {
.av-hamburger-inner:before {
background-color:white !important;
}
}@media only screen and (max-width: 767px) {
.av-hamburger-inner {
background-color:white !important;
}
}@media only screen and (max-width: 767px) {
.av-hamburger-inner:after {
background-color:white !important;
}
}And this is the Quick CSS relating to the search icon:
#menu-item-search a:before {
color:white !important;
}
