Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 19, 2020 at 3:34 am #1185897
    Flow9999

    I just saw, that my color transition for subpages does not fit well with the purple top bar over the menu.
    (1) Is it possible that I use the same color transition (color1=left to color2=right) for top bar over menu and how can this be done through quick css?
    (2) Another idea would be to let the top bar only be displayed after scrolling.

    Thank you very much!

    • This topic was modified 4 years, 9 months ago by Flow9999.
    February 20, 2020 at 5:49 am #1186218
    Rikard

    Hey Flow9999,

    Do you mean that you want the same transition in your top bar as you have in the breadcrumbs container?

    Best regards,
    Rikard

    February 20, 2020 at 2:30 pm #1186370
    Flow9999

    @Rikard: That was the idea. I’d like to test that if it looks better.
    But maybe the best solution would be to hide top bar when site is not scrolled (activate top bar with phone info only after scrolling)
    In this case the header size would need to be reduced by the ammount of pixels from top bar. CSS display:none would only hide top bar, but then header is higher than normally.

    February 21, 2020 at 1:51 pm #1186714
    Rikard

    Hi,

    Thanks for the update. Your new idea might be a bit more difficult, but you can try this in Quick CSS to have the same gradient for your top bar as in your breadcrumbs section:

    #header_meta {
    background-image: linear-gradient(to bottom right,#7c4293,#220035);
}

    Best regards,
    Rikard

    February 22, 2020 at 2:09 am #1186888
    Flow9999

    Thank you very much for the CSS code!
    It did not have any effect, but I think it may be an even better solution to let Top bar with phone info only be displayed after scrolling.
    Is this possible? If “display:none” is used maybe the header size must be reduced.

    Kind regards

    February 26, 2020 at 5:09 am #1187944
    Ismael

    Hi,

    Yes, that should be possible. You can use this css code to hide the top bar initially and only display it on scroll.

    #top #header_meta {
    display: block;
}

#top .av_header_transparency #header_meta {
    display: none;
}

    Thank you for your patience.

    Best regards,
    Ismael

    March 2, 2020 at 8:13 pm #1189515
    Flow9999

    Thanks Ismael,

    your CSS code is working fine. However I feel it gives an overall better impression to leave it as is was before.
    Thread can be closed.

    Kind regards

    • This reply was modified 4 years, 8 months ago by Flow9999.
    March 3, 2020 at 10:09 am #1189645
    Rikard

    Hi,

    Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Top Bar (over header) color transition possible?’ is closed to new replies.