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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.