Advise needed. After launching new version of ArcGIS Hub, our custom header code is not working properly when viewing the redesigned content of datasets (see pic1) - icons "info", "filter", "download", "favourites" have some kind of transparency and I don´t know how to fix it in CSS. The similar mistake appears when clicking on "I want to use this" at the left lower corner (see pic2).
Does anyone have any ideas? Many many thanks
Martin (dvorak.martin@brno.cz)
Here is the css code:
.align-items-center {
display: flex;
align-items: center;
}
@media screen and (min-width: 769px) {
.navbar-wrapper {
display: flex !important;
align-items: center;
}
}
.nav-wrap{
text-transform: uppercase;
}
.navbar-nav > li >a {
/*color: #da2128;*/
color: black;
font-weight: bold;
font-size: 14px;
}
.navbar-nav > li >ul>li>a {
color: black;
font-weight: bold;
}
.navbar-nav > li >a:hover{
color:#da2128;
background-color: transparent;
cursor: pointer;
}
.navbar-nav > li >ul>li>a:hover{
color:#da2128;
background-color: transparent;
cursor: pointer;
}
.navbar-nav > li >ul>li>ul>li>a:hover{
color:#da2128;
background-color: transparent;
cursor: pointer;
}
.navbar-nav > li >ul>li>ul>li>a{
color: black;
font-weight: bold;
}
.navbar-header{
text-align:right;
}
.navbar-toggle {
float: none;
/*margin-right:25px;*/
}
.dropdown-menu{
background: rgba(255,255,255,0.9) !important;
text-align: left;
}
.submenu{
left:100%;
top:0px;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .nav .open>a:visited {
background-color: #f2f2f2;
border-color: #f2f2f2;
opacity: 0.5;
}
.navbar-nav > .active > a:focus {
background-color: #ffffff;
opacity: 1.0;
}
.navbar-default {
display: none;
}
@media screen and (max-width: 1025px) {
.navbar-default {
display: block;
}
}
@media screen and (min-width: 769px) {
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
#main-menu{
float:right!important
}
}
@media screen and (max-width: 768px) {
.navbar {
min-height: auto;
}
.navbar-toggle {
margin: 0;
padding: 0;
}
.navbar-toggle h4 {
margin-top: 0;
}
.first-tier {
height: 50px;
}
.first-tier .row {
margin: 5px 0;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
ul.nav.navbar-nav {
display: block;
position:relative;
}
ul.dropdown-menu{
display: block;
border-style:none;
}
.submenu{
left:0%;
top:auto;
}
.navbar-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: none;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-collapse .open > .dropdown-menu {
display: block;
}
.dropdown-menu .submenu {
display: block;
}
.navbar-collapse .dropdown-menu:before,
.navbar-collapse .dropdown-menu:after {
display: none;
}
.navbar-collapse .nav > li > .dropdown-menu:before,
.navbar-collapse .nav > li > .dropdown-menu:after {
display: none;
}
}
@media (min-width: 1200px){
.container {
width: 1200px !important;
padding-left: 0;
padding-right: 0;
}
}
/* HUB TOOLBAR */
#hub-toolbar, .side-panel-tab-controls {
background: #DA2128 !important;
}
#hub-toolbar .active, .side-panel-tab-controls .active {
background: white !important;
}
#hub-toolbar .active svg, .side-panel-tab-controls .active svg {
fill: #DA2128 !important;
}
#hub-toolbar .stacked-icon svg, .side-panel-tab-controls svg {
fill: white !important;
}
