badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*
View all Themes

Transparency Effect for top navigation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 13, 2015 at 8:38 pm #40414
    Markus
    Participant

    I would like to have a transparent effect in the top navigation menu. “under” the top navigation (for the transparent effect to work) I would like to have some image gallery. so the top navigation is about 80 px high and the menu should cover the top 80 pixel of the images. Ive set up the image gallery and its kinda working (no text is visible though). example link: http://www.innerfocus.at/

    regarding the transparency, I have set the opacity of hgroup.wrap to 0.8 and the background color to #000. How can I put the image gallery under the navigation menu? I hope its kinda clear what I am trying to achieve.

    Thanks for info on this.

    December 21, 2015 at 11:30 am #40589
    Theme Horse Support Team
    Keymaster

    Hi Markus,

    Are you asking to have the Image Gallery OR Image Slider?
    If you are asking to set the Image Slider then Go to Appearance > Customize > Ambition Theme Options > Featured Content settings > Slider type > Image Slider and refresh the page and again go back to Appearance > Customize > Ambition Theme Options > Image Slider Option where you can set the image slider.

    Thank you!

    December 21, 2015 at 6:29 pm #40602
    Markus
    Participant

    Hello!

    Thanks for the support – I have already customised the features slideshow works.

    But what is a good way to move the image slider up and under the top navigation menu? I tried it with position:absolute, but this doesnt seem to be a good solution with a view to responsive design. see it here: http://www.innerfocus.at/. It forces me to have the main content and footer at an absolute position.

    what do you suggest?
    thx

    January 4, 2016 at 7:05 am #40930
    Theme Horse Support Team
    Keymaster

    Hi Markus,

    Sorry for the late reply. We are on Holidays.
    Actually we do not understand what you are trying to say and what you are trying to do?
    Are you trying to stick the menu at the top with transparency effect same like our https://www.themehorse.com site menu.

    Thank you!

    January 4, 2016 at 9:12 am #40936
    Markus
    Participant

    Hello,

    Yes, i want to have a nice looking transparency effect where the background of the nagivation menu is black with opacity set to 0.8. for the transparency effect to work, the images (of the slider and on the content pages where there is no slider, the main image) need to be below (in the sense of overlap) the top navigation so that the 0.8 opacity works.

    its of course good that all elements are relative positioned within the theme, but unfortunately i cant just add -80px on the relatively positioned slider as this only works with absolute positioning.

    so, what is the best way to achieve this to ensure that the template looks nice on different devices? i dont want to position slider, content, footer absolutely.

    January 5, 2016 at 11:48 am #40997
    Theme Horse Support Team
    Keymaster

    Hi Markus,

    Please login to your dashboard go to Appearance -> Customize -> Ambition Theme Options -> Custom CSS and paste the below CSS code then click on Save & Publish button. Also do not forget to remove all the code that you have customize. 

    .hgroup-wrap {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

    Thank you!

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