config-ui/src/styles/nav.scss

// Licensed to the Apache Software Foundation (ASF) under one or more
// contributor license agreements.  See the NOTICE file distributed with
// this work for additional information regarding copyright ownership.
// The ASF licenses this file to You under the Apache License, Version 2.0
// (the "License"); you may not use this file except in compliance with
// the License.  You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.navbar {
  position: fixed;
  top: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  z-index: 1;
}

.navbarMenuButton {
  position: absolute;
  display: none;
  color: #7497F7;
  &:hover {
    color: #E8471C; 
  }

  @media only screen and (max-width: 850px) {
    display: flex;
    left: 0px;
  }
}

.navbarMenuButtonSidebarOpened {
  position: absolute;
  display: none;
  color: #7497F7;
  &:hover {
    color: #E8471C; 
  }

  @media only screen and (max-width: 850px) {
    display: flex;
    left: 240px;
  }
}

.navbarItems {
  position:absolute;
  right:40px;
}

.navIconLink:hover {
  color: #E8471C;
}

.discordIcon {
  height: 1.4em;
  width: 1.4em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  &:hover {
    filter: invert(33%) sepia(24%) saturate(6982%) hue-rotate(355deg) brightness(97%) contrast(88%);
  }
}

.slackIcon {
  height: 2.5em;
  width: 2.5em;
  display: block;
  margin-left: -5px;
  margin-right: -5px;
  margin-top: 2px;
  &:hover {
    filter: invert(33%) sepia(24%) saturate(6982%) hue-rotate(355deg) brightness(97%) contrast(88%);
  }
}