Split menu header - transparency over slider

artmetic · February 2015

Hi Guys! Thanks for great theme!

Can you help me with custom css to reach 2 goals:

1) I want to make split menu header transpartent or to have 10% transparency

2) I want the menu to be displayed on the header - right now slider is beaing displayed after the header.

Looking forward to your answer on this matter! Thanks in advance. I hope it's possible

Albert · February 2015

Hi,

please send us url to your page so we can have a look.

artmetic · February 2015

http://rosenthaler.stronazen.pl/?page_id=21

I would like the header to be transparent and on top of the slider (something like yoga demo).

Another question:

3) Can I make main menu allign to right and secondary menu allign to left? so it really looks like the logo splits the menu? Right now both of them are centered.

Albert · February 2015

To make this header transparent in your case, please use below css:

.header-split #Top_bar {
    background-color: transparent !important;
    left: 0;
    position: absolute;
    top: 0 !important;
}

3) This can be done within below css:

.header-split #Header .top_bar_left .menu_left { text-align: right; }
.header-split #Header .top_bar_left .menu_right { text-align: left; }

artmetic · February 2015

Thanks for quick response! On the page that I gave you an URL it works like a charm. The problem is, right now on every page all the content goes behind the menu.

4) and if I would like to make 20% transparency of header background color, I use rgba in the color background?

Albert · February 2015

So please send us also url to page where this css does not work and we'll try to find the problem.

But to make 20% of transparency you must use RGBA colors, instead of HEX.

artmetic · February 2015

For example http://rosenthaler.stronazen.pl/ first page

artmetic · February 2015

btw. the sticky header has dissapeared with the custom css

Albert · February 2015

As we see, header is transparent because you have "Witaj, swiecie" text that should be invisible. But about sticky header, please use below css instead of what we gave you last time:

.header-split #Top_bar:not(.is-sticky) {
    background-color: transparent !important;
    left: 0;
    position: absolute;
    top: 0 !important;
}

artmetic · February 2015

Hi Guys again,

I have further problems with menu:

1) Left/Right allignment for main and secondary menus WORKS also in mobile menu

2) As you can see here: http://rosenthaler.stronazen.pl/?page_id=68 all the content goes behind the transparent menu (one solution is to put in this type of page first section with divider of height of the menu itself, but maybe you have an idea to do it with code).

3) I would like to manipulate with the height of #Top_bar menu, but can't figure out the code myself

4) I would like also to change the measures of logo, but it's restricted to the height of Top_bar which I can't change

5) Is there a way to make the logo stick outside the height of Top_bar? So let's say header height is 150 but logo is place from the top withoug any padding and has height of 180px so 30px sticks out of the menu bar?

6) How can I remove padding and margin for logo in menu and how I can change the top padding for text menu elements?

Sorry for so many questions, but I wanted to gather everything in one post, rather than bother you guys all the time

artmetic · February 2015

oooh and

6) When I scroll down the page and the sticky menu appears, there is this stuttering effect (like sudden jump). This doesn't exist when I set the transparent header: for comaprison please see also my other page I'm currently working on: protrade.stronazen.pl

Bartek

Albert · February 2015

1) So you want to keep left menu to left and right to right while is sticky?

2) This happen because you use TRANSPARENT header. This is how transparent works and the only thing you can do is different header style on sub-pages.

3) Please make a screenshot of what exactly you want to do.

4) Do you want to increase sticky logo or regular?

5) No, this is not possible unfortunately.

6) The same questions as under point 4.

artmetic · February 2015

1) Yes, but it is like that right now. I am talking about MOBILE menu. In mobile only, main and secondary menu should be centered. On desktop it should be main->right, secondary->left (as it is set right now)

2) OK, I will be fine with empty section behind the menu.

3) I want to set the header (menu) to 150px height, I would like also to change the sticky menu height to 100px

4) Both.

5) OK

6) I don't understand the question. Please, try to scroll the website down in protrade.stronazen.pl with transparent header - it's very smooth and you don't feel like the sticky menu is jumping suddenly above the slider. In rosenthaler.stronazen.pl when sticky menu appears above the slider and it is not smooth. I need to reach the same effect like on protrade.

Best regards,

Bartek

Albert · February 2015

1) Ok, we got it now. So to center menu items on mobile, please use below css:

@media only screen and (max-width: 479px) { #Top_bar #menu ul li { text-align: center; } }

3) Because on this page http://rosenthaler.stronazen.pl/?page_id=68 header is transparent it is not possible to setup height for regular menu. But as we see, sticky header is already 100px height.

4) This can be done within below css:

#Top_bar.is-sticky #logo img { max-height: 150px; }
#Top_bar #logo img { height: 120px; }

6) It is not possible to get the same effect on wine website because you use different styles and options for header.

artmetic · February 2015

1) Great thanks!

3) Ok

4) It works great, but now I need to adapt the height of text menu... Can you give me the code to do that? so everything is alligned vertically?

6) Ok, so maybe I can set somehow to appear when I scroll the website to 1000 px?

Albert · February 2015

4) As we wrote above, it is not possible to adapt menu height if you use transparent header.

6) This is also not possible Sorry!

artmetic · February 2015

4) Even if we set text padding from top to 70px for example?

Albert · February 2015

4) Do you mean something like?

#Content { margin-top: 150px; }

If this is ok for you then fine because this is all you can do in this case.

Padding won't work in this case because header is transparent and only margin will work.

artmetic · February 2015

I meant something like this: http://snag.gy/QujdK.jpg to make the menu a little lower

In the same time can I start logo from top? top padding/margin = 0px?

Albert · February 2015

What is the url to page that you have on screenshot? Because this is definitely not what you sent before. Please send us url where you got this header style with slider and we'll see what we can do for you.

artmetic · March 2015

rosenthaler.stronazen.pl

Albert · March 2015

Hi,

to move this menu down, please use below css:

.header-split #Header .top_bar_left .menu_left { margin-top: 20px; }
.header-split #Header .top_bar_left .menu_right { margin-top: 20px; }

artmetic · March 2015

And my last question

How to remove this bar over menu?

http://snag.gy/q58yl.jpg

Thank you guys, for your incredible support

artmetic · March 2015

And when I applied the above code, I got these margins also in sticky menu (http://snag.gy/ubfEX.jpg) and mobile (http://snag.gy/wvBg5.jpg), can we differentiate all of these?

DESKTOP (normal) - margin 20px

DESKTOP (sticky) - margin 0px

MOBILE <1025px - maring 0px

Albert · March 2015

To remove bar over menu items, please use:

#Top_bar .menu > li a::after { display: none; }

But to sort menu, please use below css instead of what we gave you before:

@media only screen and (min-width: 1240px) {
    .header-split #Header .top_bar_left .menu_left { margin-top: 20px; }
    .header-split #Header .top_bar_left .menu_right { margin-top: 20px; }
    .header-split #Header #Top_bar.is-sticky .top_bar_left .menu_left { margin-top: 0 !important; }
    .header-split #Header #Top_bar.is-sticky .top_bar_left .menu_right { margin-top: 0 !important; }
}

Split menu header - transparency over slider

Comments