Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 20, 2015 at 9:37 am #462169
    ActionPress

    Hi, great theme!
    I just need help with a few tweaks to finish off my site, I thought I would put them in one post..

    Active Page Nav Colour
    Currently I have 4 anchor links and 2 page links in the nav bar, the four anchor points all appear darker than the page links (as I guess all 4 anchor points are active on the homepage), can I remove this effect so they all appear the same colour/weight and leaving just the underline effect on the active page/section

    Media Query amends
    Currently when I shrink down to iPhone size there are a few issues…

    I need to add some padding to the yellow Cogmed logo (first in the row of four) as when they become vertically stacked the image creeps under the little arrow on the above sections

    And now on the 3 colour/background image sections I notice the text isn’t readable when on an iPhone view so I would like to somehow change the opacity of the image so it is less prominent and the text can be read over the top, or I could just make a new lighter version of the image in photoshop and swop to that when the iPhone media query is triggered. Whatever is easiest

    Thanks in advance!

    June 22, 2015 at 8:16 am #462474
    ActionPress

    bump

    June 22, 2015 at 12:43 pm #462681
    Ismael

    Hi!

    Thank you for using Enfold.

    1.) Add this in the Quick CSS field to change the font color of the menu items:

    .header_color .sub_menu>ul>li>a, .header_color .sub_menu>div>ul>li>a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
  color: #333333;
}

    2.) Use this to add a top margin or padding in the cogmed logo:

    @media only screen and (max-width: 767px) {
.home .avia-image-container.avia_animated_image.avia_animate_when_almost_visible.pop-up.av-styling-.av-hover-grow.avia-builder-el-10.avia-builder-el-no-sibling.avia-align-center.avia_start_animation.avia_start_delayed_animation {
  margin-top: 20px;
}}

    3.) If you want to change the opacity of the background, try this:

    @media only screen and (max-width: 767px) {
.av-parallax.avia-full-stretch.enabled-parallax.active-parallax {
  opacity: .2;
}}

    Remove browser cache then reload the page.

    Best regards,
    Ismael

    June 22, 2015 at 2:52 pm #462806
    ActionPress

    Thats so much Ismael, the first two worked fine.

    I’m still having an issue however with the opacity of background images, your code worked fine when I scaled down the window in my browser, but doesn’t seem to work when I view the site on an iPhone (which is where the problem occurs). So I think it might be safer if I can get the theme to swop to a new image (which I will create) when that media breakpoint is triggered, how would I do that?.

    Thanks again

    Jon

    June 23, 2015 at 6:59 am #463148
    Rikard

    Hi!

    I think it should work but you might have to change the media query, ipad is 1024×768 so maybe this will work?

    @media only screen and (max-width: 1024px) {
.av-parallax.avia-full-stretch.enabled-parallax.active-parallax {
  opacity: .2;
}}

    Regards,
    Rikard

    June 24, 2015 at 9:44 am #463839
    ActionPress

    Thanks Rikard, I have tried that and it definitely works fine in the browser when I shrink down the width of the window, but not when I view the site on an iPhone (a friend also tried on their phone).

    Any ideas? or please let me know how I can get the background image to swop to a different one when the media query is triggered

    Thanks

    June 25, 2015 at 5:33 am #464408
    Rikard

    Hi!

    I couldn’t see any changes when resizing the window on your site but maybe you’re testing locally? You can try something like the following to change the background image for mobile, this will target the first color section (dementia):

    @media only screen and (max-width: 767px) {
#dementia .av-parallax {
background-image: url(https://www.neuropsychservices.com/wp-content/uploads/2015/06/newimg.jpg) !important;
}
}

    Regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.