Desktop/mobile appearance of header

  • Unknown's avatar
    almila26 · Member ·

    Desktop: I want the menu text to be white before scrolling on desktop

    Mobile: I want the header that is displaying on my ‘about’ page on mobile to also display on the mobile home page/ on all other pages.

    Overall, the header should be bright green with white logo on desktop and the same on mobile (with the exception of the menu going into the hamburger style on mobile).

    Can someone please help me to change this ASAP?
    The desktop problem can be solved by deleting my custom logo, however I need this to be there, so I think the coding must change to solve this.

    HELP! need it done within the week please! :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, on the menu text color, due to the way the change to the green banner at top is done, there is nothing for me to use in the CSS to trigger black text when it turns green. About the only thing I could come up with on this would be the following which makes the text white and set s a text shadow on it so that it appears a little better when the green comes in. 

    #wrap #header .site-title a, #wrap #header .menu a, #wrap #header .menu a:link, #wrap #header .menu a:visited, #wrap #header .menu-toggle, #wrap #header .menu-toggle::before, .mobile-menu a, .mobile-menu a:link, .mobile-menu a:hover, .mobile-menu a:visited, .page .mobile-menu a, .page .mobile-menu a:link, .page .mobile-menu a:hover, .page .mobile-menu a:visited {
    color: #fff !important;
    text-shadow: 2px 2px 1px #000 !important;
}

    You can set a header image in the Customizer > Header Image and that will appear on all pages unless you have a featured image set on the page. The header image suggested size is 1800px x 600px. You can get an idea of how that would look by visiting this page on the demo site.

    You can give that a try and see if that will work for you. If it will not, I would suggest setting that image as the featured image on all of your static pages (what, how, meet us, etc.).

    On your main page, with it set to the Home Page Template, it will not show a header image on any size screen/window. The slider at the top takes its place. We could add the image on mobile via CSS, but it is more than a little tricky as it would require numerous Media Queries to adjust the height and position of the header div and on some displays, there may be some gaps above or below the image.

    On the background color of the menu/logo area after the touch device menu activates, add the following Media Query and see what you think. I had to use a slightly different color for it so that the logo would stand out better. 

    @media screen and (max-width: 1024px) {
  #header .five.columns {
    background-color: #66dd44;
  }
}
  • The topic ‘Desktop/mobile appearance of header’ is closed to new replies.