Transparent Header

nano_pillao
Offline
Last seen: 1 year 1 month ago
Wed, 07/13/2016 - 09:24
#1
Transparent Header

Hello Guys,
Could you tell me please where to change the header background to transparent with text color to white?
Thanks,

nano_pillao
Offline
Last seen: 1 year 1 month ago
Sat, 07/16/2016 - 01:35

Guys could you help me with this? I want to use two type of headers. The first one on slider to be transparent with white text and then the sticky header use it with the header-2 style. Is this possible?

hattt13
Offline
Last seen: 1 day 5 hours ago
Sat, 07/16/2016 - 11:18

Hi, you can add the code: 

header.header.header-1 .navigation ul.nav li a,
header.header.header-1 .navigation ul.nav span.plus > span,
header.header.header-1 .navigation ul.nav > li > a,
header.header.header-1 .navigation ul.nav span.plus > span,
header.header.header-1 .minicart-wrap .toggle-minicart{
color: white;
}


header.header .navigation ul.nav > li > a,
header.header .navigation ul.nav span.plus > span,
header.header .navigation ul.nav > li > a,
header.header .navigation ul.nav span.plus > span,
.minicart-wrap .toggle-minicart{
color: black;
}

nano_pillao
Offline
Last seen: 1 year 1 month ago
Sun, 07/17/2016 - 03:27

Ok thanks but I´m not being able to get read off the white background for the first header. This is the code I´m using:

/* 2.   Header
--------------------------------------------------------------------------------*/
header.header {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header.header.header-fixed {
  position: fixed;
  -webkit-animation: fixedAnim 0.4s ease both;
  -moz-animation: fixedAnim 0.4s ease both;
  -ms-animation: fixedAnim 0.4s ease both;
  -o-animation: fixedAnim 0.4s ease both;
  animation: fixedAnim 0.4s ease both;
}

header.header {
  background-color:rgba(255,255,255,0);
  border-bottom: 0px solid #237b26;
}

header.header.header-1 {
  background-color:rgba(255,255,255,1);
  border-bottom: 0px solid #237b26;
}

header.header.header-1 .navigation ul.nav li a,
header.header.header-1 .navigation ul.nav span.plus > span,
header.header.header-1 .navigation ul.nav > li > a, 
header.header.header-1 .navigation ul.nav span.plus > span,
header.header.header-1 .minicart-wrap .toggle-minicart{
color: black;
}

header.header .navigation ul.nav > li > a,
header.header .navigation ul.nav span.plus > span,
header.header .navigation ul.nav > li > a, 
header.header .navigation ul.nav span.plus > span,
.minicart-wrap .toggle-minicart{
color: white;
}

HTML

<!-- HEADER -->
    <header class="header header-1 header-sticky">

hattt13
Offline
Last seen: 1 day 5 hours ago
Mon, 07/18/2016 - 10:45

please, you can sent link your site, thanks 

hattt13
Offline
Last seen: 1 day 5 hours ago
Tue, 07/19/2016 - 09:42

hi "The first one on slider to be transparent with white text and then the sticky header use it with the header-2 style". Then the sticky header you use class .header-fixed. Example:

.header-fixed {
background-color: transparent;
}

nano_pillao
Offline
Last seen: 1 year 1 month ago
Wed, 07/20/2016 - 03:18

Sorry Hattt13, it´s not working for me. Thank you very much for your assistance.

linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 month 1 week ago
Wed, 07/20/2016 - 09:45

Hi there,

@Nano_pillao, you save this code on style.css:

header.header.header-sticky {
position: fixed;
background-color: transparent;
border: none;
}
header.header.header-sticky .navigation ul.nav li a,
header.header.header-sticky .minicart-wrap .toggle-minicart,
header.header.header-sticky .head-social a{
color: white;
}
header.header.header-fixed {
background: white;
border-bottom: 1px solid #ddd;
}
header.header.header-fixed .navigation ul.nav li a,
header.header.header-fixed .minicart-wrap .toggle-minicart,
header.header.header-fixed .head-social a{
color: black;
}
linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 month 1 week ago
Thu, 07/21/2016 - 09:54

Hi @Nano_pillao,

Pls send to me address host and account. I'll fix bug give you.

linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 month 1 week ago
Thu, 07/21/2016 - 12:12

Slider has fullscreen, you check again.

nano_pillao
Offline
Last seen: 1 year 1 month ago
Fri, 07/22/2016 - 03:51

Thank you so much Linhpeter0508. Now everything is working great. Thanks for the assistance.

Log in or register to post comments