Howto make Navigation header backgroundcolor transparent,and opac ?

Robban · 2016-11-18 07:13:45

Hallo

its lots easier to make pancakes than this...

i hope someone have the knowledge if it ispossible in an relative easy way to do it

ive tried to make the Navheader transparent trough making some Css stuff in different ways
And can not figure out how to do it ?? ( first time i try out... )

Ive tried with the masthead just for se if it was possible and that was easy and functionally.
and then i tried for the background color navheader... :-)

.masthead {

background-color: rgba(236, 20, 20, 0.36);

}

but for the navheadbak i cant find out how to do...

first atttempt failure = nothing happen ive find the 1st name in an export template

1st attempt:

"" nav.header.bgcolor {

background-color: rgba(236, 20, 20, 0.36);

}

2nd attempt

"" nav.header. {

background-color: rgba(236, 20, 20, 0.36);

some other names ivetried are

navigation.header

primary-menu menu ( from sourcecode )

after 5987643 different names and attempt. ive try to change a template export and then import it as a template... it will not work either.

changing from ,"nav.header.bgcolor":"#ffffff", change to ,"nav.header.bgcolor":" rgba(255, 255, 255, 0)",

Christmas wish:

Maybe in future there will be a slider in navheader menyitems background just like there is for dropdown...

Last edited by Robban (2016-11-18 11:41:41)

markh · 2016-11-18 07:31:58

You can make theMasthead transparent in Backlight> designer> templates> whatever page template you are using. Then in the Masthead section for background color pull down the drop down and make the color rgba(255,255,255,0) The zero on the end controls color opacity with 0 being transparent.

rod barbee · 2016-11-18 08:01:28

what Mark said. You can do the same thing for navigation menu items

Robban · 2016-11-18 10:12:15

Are you sure you have that option/ opacity slide in your menu for navigationhead background color ?

in my version (Backlight 1.1) does not the slid exist at all in that menu

only existing in the dropdown border color menu... and that do not transparens thebackground (if im right ;-) )

Earlier i mentioned my css try out for masthead just for showing how i think then try do it for navbackcolor,,,

maybe its only possible to make that css stuff if the "colorblock" for navhead have "rgba" programmed from start, therefore i cant change it with css ?? ( i hope you understand what i mean )

i think backlight is superb and easy to managed and / learn about how to do, but coding css and other stuff is a new lesson for me.

so far i used approx 4h to make the test site from scratch and lot of try and error...

im trying to make both masthead and navmeny at opacity of x %

i will be happy if you want to watch my testsite and hopefully you understand better what im trying to do :-)

www.colorempictures.com

Last edited by Robban (2016-11-18 10:19:40)

rod barbee · 2016-11-18 10:27:50

it's there:

Robban · 2016-11-18 12:28:44

Thanks Rod for showing me that pic of Masthead coloradjustment ;-)

im grateful that you try to help me out even if my quest was ment to be about opacity of Navigationheader.

Im looking for the answer how to change the opacity for NavigationHead that actual " colorbox " contains no opacity slider (rgba).
Because of that i was thinking if a Css could fix it ?

( folders in backlight page)

Pagesetup
Pagelayot
MainColumn
TrayColumns
Typography
Masthead your screenshot was taken here
Navigation
Navigation.head / Menu items / Background-Color/ ""colorbox"" In here there is no Opacitysllder only (rgb)
Navigation Trays
...
...
...
...

Last edited by Robban (2016-11-18 12:30:51)

Robban · 2016-11-18 12:54:19

Rod i find out you have a superb and great testsite

in your enterpage there is a low opacity in the masthead and navigateheadbackground is totallyblack with white text " Enter"

Have you find away to change the opacity for the black color in navigationhead ?

http://backlight-rb-test.barbeephoto.com

One of your pages have php hooks location there i found ttg_navigation hook location.
wich gave me some ideas and a need to learn mora about php and css :-)

rod barbee · 2016-11-18 13:22:25

Navigation.head / Menu items / Background-Color/ ""colorbox"" In here there is no Opacitysllder only (rgb)

You're right, there is no slider. But you can still use rgba to create transparency in the menu items.

Ben · 2016-11-18 14:07:41

I wasn't aware of that hack and do not recommend it. Matt has chosen which colours support alpha based on the handling across different designs and breakpoints. Those colours are given alpha sliders.

Matthew · 2016-11-18 14:53:09

Color values are also sometimes fed into PHP functions for format conversions, for example, if I need to break apart a hex value to create independent R, G and B values for use in a script. An invalid value -- i.e. supplying an rgba() value when the function expects a hex -- could be very, very bad.

rod barbee · 2016-11-18 14:59:16

I must have experimented with that a long time ago and forgotten about it. Didn't realize it wasn't actually supposed to that.

charlie.choc · 2016-11-18 22:55:04

So the short answer is that there is no way to make the menu bar transparent?

rod barbee · 2016-11-18 23:08:59

You can try this for the menu bar itself:

nav, nav ul.primary-menu.menu {
background-color: transparent;
}

and then for the menu items, add nav li
to that:

nav, nav ul.primary-menu.menu, nav li {
background-color: transparent;
}

if you need the :hover or other states to be transparent, just add those in too.

charlie.choc · 2016-11-18 23:47:23

Thanks.

rod barbee · 2016-11-19 00:49:52

Robban wrote:

Rod i find out you have a superb and great testsite
in your enterpage there is a low opacity in the masthead and navigateheadbackground is totallyblack with white text " Enter"
Have you find away to change the opacity for the black color in navigationhead ?

yep, custom css:

nav, nav ul.primary-menu.menu {
background-color: transparent;
}

Robban · 2016-11-19 19:50:35

Rod Big big thanks ! :-)

rod barbee · 2016-11-20 00:51:47

Thanks for asking the question. Got me motivated to get rid of that dark bar on the home page slide show. Looks better now

Community @ The Turning Gate

#1 2016-11-18 07:13:45

Howto make Navigation header backgroundcolor transparent,and opac ?

#2 2016-11-18 07:31:58

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#3 2016-11-18 08:01:28

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#4 2016-11-18 10:12:15

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#5 2016-11-18 10:27:50

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#6 2016-11-18 12:28:44

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#7 2016-11-18 12:54:19

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#8 2016-11-18 13:22:25

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#9 2016-11-18 14:07:41

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#10 2016-11-18 14:53:09

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#11 2016-11-18 14:59:16

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#12 2016-11-18 22:55:04

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#13 2016-11-18 23:08:59

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#14 2016-11-18 23:47:23

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#15 2016-11-19 00:49:52

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#16 2016-11-19 19:50:35

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

#17 2016-11-20 00:51:47

Re: Howto make Navigation header backgroundcolor transparent,and opac ?

Board footer