CSS:
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400, 400i, 700"); .docked #main-outlet { margin-top: 0; } .docked nav#bar { display: none; } nav#bar { font-family: 'Open Sans', sans-serif; font-size: 16px; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; } nav#bar ul { display: inline-flex; list-style-type: none; margin: 0 0 0 25px; align-items: center; } nav#bar ul li { margin-left: 20px; } @media (max-width: 650px) { nav#bar { flex-wrap: wrap; justify-content: center; } nav#bar #logo { display: flex; justify-content: center; flex-basis: 100%} nav#bar #logo img { width: 120px; } nav#bar ul li { margin-left: 8px; } nav#bar ul li a { font-size: 14px; } nav#bar ul li a.www-btn { padding: 3px 8px 5px; } } nav#bar li a { text-decoration: none; color: #333; } nav#bar li a:hover { border-bottom: 5px solid; } nav#bar li:nth-of-type(1) a:hover { border-color: #D13239; } nav#bar li:nth-of-type(2) a:hover { border-color: #f15c22; } nav#bar li:nth-of-type(3) a:hover { border-color: #F2E88F; } nav#bar li:nth-of-type(4) a:hover { border-color: #00953A; } nav#bar li:nth-of-type(5) a { font-weight: bold; } nav#bar li:nth-of-type(5) a:hover { border-color: #14A0F4; } nav#bar img { width: 150px; height: auto; max-height: 40px; } nav#bar .www-btn { border: none; border-radius: 100px; background: #13a0f5; color: #fff; padding: 5px 20px 7px; } nav#bar .www-btn.big { font-size: 1.5rem; padding: 7px 30px 10px 30px; } nav#bar .www-btn:hover { background: #0a5783; } nav#bar .www-btn:active { background: #08476b; box-shadow: none; } nav#bar a.www-btn { text-decoration: none; color: #fff !important; } .d-header { background: linear-gradient(-90deg, #F2E88F, #a3e6ff); background-size: 100% 100%; background-repeat: repeat-x; box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.15); } .d-header .icons .icon { color: #555; }
I’ll post the content of the Header in a bit. The forum keeps rendering the html when I paste it…