Setting the Modern Style for the Header to be Transparent

I'm using the Modern Style for the Header and I have 2 issues:

1. how can I set the Top Bar Right to be also Transparent?
2. how can I set the opacity to different value for the other pages, since menu is not shown clearly?

You may have a look at it:  www.hotel.easyhotelia.eu

Comments

  • Hi,

    1. To set opacity for the right top bar section, please use below css:
    #Top_bar .top_bar_right::before { background-color: rgba(255, 255, 255, 0.2) !important; }
    #Header .top_bar_right { background-color: rgba(255, 255, 255, 0.2) !important; }
    2. Where exactly menu is not shown clearly? Please show us what you mean because we do not see anything wrong.
  • Hello,

    Thanks for your answer.
    For the second question let me explain the situation:

    For One Page styling, I tried to add some other pages that are not in the main page.
    So, when these pages are on the Top then the Menu is not shown clearly since it is set as Transparent.
    Since I couldn't resolve this situation I mange to put all the content in one page but this is now always possible.
  • For the first issue, I did the changes but there is a small line across the menu, can this be eliminated?
    In order to see what I'm taking about the second part, please try to see the following url:

    http://www.hotel.easyhotelia.eu/portfolio-item/features/

    At the first top, the Header doesn't seem professional.
  • 1) To eliminate this line, please use below css:
    #Top_bar:not(.is-sticky) .top_bar_left { width: 1151px !important; }
    #Top_bar.is-sticky .top_bar_left { width: 1161px !important; }
    2) Please show us on screenshot how additional menu items looks like and also please send us url to such page where you got those items.
  • Hi,

    I used your suggestion, but it made things worst... the whole part moved down around 40px.

    For point 2, notice the Top part that appears in all the pages except the Home page.

    image
  • 1) If above css does not work as you wish, please try below css:
    #Top_bar .top_bar_right::before {
        left: -11px;
        width: 11px;
    }
    However, if above css won't work as well, then we do not have any other suggestions for your site.

    2) We do not see any differences between the home page and sub-pages. Each page looks exactly the same so we do not understand what exactly you want to do.
Sign In or Register to comment.