Changed primary menu order

Increase size logo and slogan
Align menu item in bar better
Fix: grey background in menu

public/css/style.css

@@ -31,10 +31,14 @@ body {
 }
 
 @media (min-width: 768px) {
-  .grey_background {
+  .grey_background:not(.site_container) {
     background-color: #f9f9f9;
   }
 }
+.page {
+  padding-top: 20px;
+}
+
 .content_container {
   padding-right: 50px;
 }
@@ -163,10 +167,10 @@ div.pp_default .pp_close:hover {
 }
 .header .logo {
   float: left;
-  margin-top: 18px;
+  margin-top: 10px;
 }
 .header .logo img {
-  height: 75px;
+  height: 95px;
 }
 .header .advertisement {
   float: right;
@@ -198,7 +202,6 @@ div.pp_default .pp_close:hover {
 @media (min-width: 767px) {
   .menu_container {
     height: 75px;
-    margin-bottom: 20px;
     background-image: linear-gradient(to right, #0102b0, #4090e3);
   }
 }
@@ -577,8 +580,18 @@ div.pp_default .pp_close:hover {
 }
 
 .slogan {
-  width: 150px;
+  width: 190px;
-  margin: 12px 0;
+  margin: 8px 0;
+}
+
+.grey_background nav > div {
+  background: #f9f9f9;
+}
+.grey_background .menu > li a {
+  background: #f9f9f9;
+}
+.grey_background .menu > li:last-child:after {
+  background: #f9f9f9;
 }
 
 .header .now-playing-header {

resources/assets/sass/base/_container.scss

@@ -20,10 +20,13 @@ body {
   @include container;
 }
 @media (min-width: 768px) {
-  .grey_background {
+  .grey_background:not(.site_container) {
-    background-color: #f9f9f9;
+    background-color: $container-bg;
   }
 }
+.page {
+  padding-top: 20px;
+}
 .content_container {
   padding-right: 50px;
 }

resources/assets/sass/components/_header.scss

@@ -2,9 +2,9 @@
   height: 111px;
   .logo {
     float: left;
-    margin-top: 18px;
+    margin-top: 10px;
     img {
-      height: 75px;
+      height: 95px;
     }
   }
   .advertisement {

resources/assets/sass/components/_menu.scss

@@ -4,7 +4,6 @@
 .menu_container {
   @media (min-width: 767px) {
     height: 75px;
-    margin-bottom: 20px;
     background-image: linear-gradient(to right, #0102b0, #4090e3);
   }
 
@@ -412,6 +411,28 @@
 }
 
 .slogan {
-  width: 150px;
+  width: 190px;
-  margin: 12px 0;
+  margin: 8px 0;
+}
+
+.grey_background {
+  nav {
+    > div {
+      background: $container-bg;
+    }
+  }
+
+  .menu {
+    > li {
+      a {
+        background: $container-bg;
+      }
+
+      &:last-child {
+        &:after {
+          background: $container-bg;
+        }
+      }
+    }
+  }
 }

resources/views/calendarlist.blade.php

@@ -10,6 +10,9 @@
 @section('container_class')
     grey_background
 @endsection
+@section('site_container_class')
+    grey_background
+@endsection
 
 @section('content_class')
 @endsection

resources/views/jobsitem.blade.php

@@ -17,6 +17,9 @@
 @section('page_container_class')
 	grey_background
 @endsection
+@section('site_container_class')
+	grey_background
+@endsection
 @section('container_class')
 	news_post post_container
 @endsection

resources/views/jobslist.blade.php

@@ -15,6 +15,9 @@
 @section('page_container_class')
     grey_background
 @endsection
+@section('site_container_class')
+    grey_background
+@endsection
 @section('container_class')
     news_post post_container
 @endsection

resources/views/layouts/master.blade.php

@@ -12,7 +12,7 @@
             style="display:none; visibility:hidden"></iframe>
 </noscript>
 <!-- End Google Tag Manager (noscript) -->
-<div class="site_container boxed">
+<div class="site_container boxed @yield('site_container_class')">
     <div class="header_top_bar_container style_11 clearfix">
     </div>
     <div class="header_container small">
@@ -64,13 +64,13 @@
             <img class="slogan" src="/images/Slogan_DIAP white.svg" />
             <ul class="right_menu">
                 <li>
-                    <a class="player with_svg_icon" style="margin-top: 2px;" href="{{url('luister/live')}}">Luister live radio {!!file_get_contents(__DIR__ . '/../../../public/images/icons/radio.svg')!!}</a>
+                    <a class="player with_svg_icon" href="{{url('luister/live')}}">Luister live radio {!!file_get_contents(__DIR__ . '/../../../public/images/icons/radio.svg')!!}</a>
                 </li>
                 <li>
-                    <a class="with_svg_icon" style="margin-top: 1px;" href="{{url('kijk/studio')}}">Kijk live tv {!!file_get_contents(__DIR__ . '/../../../public/images/icons/television-2.svg')!!}</a>
+                    <a class="with_svg_icon" href="{{url('kijk/studio')}}">Kijk live tv {!!file_get_contents(__DIR__ . '/../../../public/images/icons/television-2.svg')!!}</a>
                 </li>
                 <li>
-                    <a href="https://wa.me/31888505651" target="_blank">Tip de streekredactie <i class="fa-solid fa-circle-plus"></i></a>
+                    <a href="https://wa.me/31888505651" style="{{!isset($searchURL) ? 'margin-top: 3px' : ''}}" target="_blank">Tip de streekredactie <i class="fa-solid fa-circle-plus"></i></a>
                 </li>
                 @if(isset($searchURL))
                     <li>

resources/views/newslist.blade.php

@@ -12,6 +12,9 @@
 @section('container_class')
     grey_background
 @endsection
+@section('site_container_class')
+    grey_background
+@endsection
 
 @section('breadcrumb')
     @if($title)

resources/views/radioprogram.blade.php

@@ -7,6 +7,9 @@
 @section('page_class')
     grey_background page_container
 @endsection
+@section('site_container_class')
+    grey_background
+@endsection
 
 @section('breadcrumb')
     <ul class="bread_crumb">

resources/views/widgets/menu.blade.php

@@ -26,7 +26,6 @@
 		),
 		"Gemist" => "/gemist/programma",
 		"Regioagenda" => "/agenda",
-		"Adverteren?" => "/adverteren",
 		"Over NH Gooi" => array(
 				"" => "/contact",
 				"Contact" => "/contact",
@@ -35,7 +34,8 @@
 				"Uitgangspunten streekredactie" => "/uploads/Eigen rol en ambities NH Gooi binnen de lokale nieuwsvoorziening.pdf",
 				"Frequenties" => "/frequenties",
 				"App" => "/app"
-		)
+		),
+		"Adverteren" => "/adverteren"
 );
 ?>
 <?php