"Free Trial" and "Support" nav buttons

docusaurus.config.js

@@ -439,29 +439,38 @@ module.exports = {
             alt: 'Sign up for a Sumo Logic free trial',
           },
           {
-            to: 'https://support.sumologic.com/support/s',
             position: 'right',
-            className: 'header-support',
-            alt: 'Contact Sumo Logic support',
-          },
-          {
-            position: 'right',
-            className: 'header-github-link',
+            className: 'support-menu-trigger',
+            to: '#',
             type: 'dropdown',
-            'aria-label': 'GitHub repository',
-            to: 'https://github.com/SumoLogic/sumologic-documentation',
-            items:[
+            items: [
+              {
+                label: 'Contact Support',
+                to: 'https://support.sumologic.com/support/s',
+                icon: 'support',
+              },
+              {
+                label: 'Request Demo',
+                to: 'https://www.sumologic.com/demos',
+                icon: 'co_present',
+              },
               {
-                label: 'Send Feedback',
+                label: 'Submit Feedback',
                 to: 'https://github.com/SumoLogic/sumologic-documentation/issues/new/choose',
-                icon: 'rate_review',
+                icon: 'thumbs_up_down',
               },
               {
                 label: 'Contribute to Docs',
-                href: '/docs/contributing',
+                to: 'docs/contributing',
                 icon: 'edit_note',
               },
-            ]
+            ],
+          },
+          {
+            className: 'header-github-link',
+            to: 'https://github.com/SumoLogic/sumologic-documentation',
+            position: 'right',
+            alt: 'Link to Sumo Logic Docs GitHub repository',
           },
         ],
       },

src/css/sumo.scss

@@ -227,14 +227,15 @@ html[data-theme='light'] {
   min-width: 100px;
 }
 
+//GitHub icon
 .header-github-link:hover {
   opacity: 0.6;
 }
 
 .header-github-link::before {
   content: '';
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
   margin-top: 7px;
   display: inline-flex;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
@@ -251,77 +252,136 @@ html[data-theme='light'] {
     no-repeat;
 }
 
-//Free Trial nav button
-
-.header-trial:hover {
-  opacity: 0.85;
-}
 
-.header-trial::before {
-  content: 'START FREE TRIAL';
-  border: 1px solid #2aa1e6;
-  color: #FFF;
+/* General styling for the Support dropdown button */
+.support-menu-trigger {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: white !important; /* Text color should be white */
+  border: 1px solid rgba(255, 255, 255, 0.2); /* Border matching the style */
   border-radius: 3px;
   padding: 5px 15px;
   font-size: 13px;
   font-weight: 600;
-  display: inline-flex;
-  background: #2aa1e6;
-  margin-right: -20px;
+  background-color: #2c3e50; /* Dark background color similar to "Demo" */
+  margin-left: 8px; /* Space between text and the arrow */
 }
 
-.header-trial::after {
-    display: none !important;
-    content: none !important;
+/* Add hover effect similar to the "Demo" button */
+.support-menu-trigger:hover {
+  background-color: #34495e; /* Slightly lighter on hover */
+  border-color: rgba(255, 255, 255, 0.5); /* Change border color on hover */
 }
 
-[data-theme='dark'] .header-trial::before {
-  background: transparent;
-  border: 1px solid #2aa1e6;
-  color: #FFF;
-  border-radius: 3px;
-  padding: 5px 15px;
+/* Add the button text using ::before if not present */
+.support-menu-trigger::before {
+  content: 'Support'; /* Replace with your desired text */
   font-size: 13px;
-  font-weight: 600;
-  display: inline-flex;
-  background: #2aa1e6;
-  margin-right: -20px;
+  color: white; /* Set the text color to white */
+  margin-right: 8px; /* Space between text and the arrow */
 }
 
-//Contact Support nav button
-.header-support:hover {
-  opacity: 0.65;
+/* Styling the arrow (SVG) */
+.support-menu-trigger svg {
+  width: 9px;
+  height: 6px;
+  fill: none;
+  stroke: white; /* Make the arrow white by default */
 }
 
-.header-support::before {
-  content: 'CONTACT SUPPORT';
-  background: transparent;
-  border: 1px solid #000;
-  color: var(--ifm-navbar-link-color);
+/* Media query for light mode */
+@media (prefers-color-scheme: light) {
+  .support-menu-trigger {
+    stroke: white;
+    border-color: black; /* Darker border for light mode */
+  }
+}
+
+/* Media query for dark mode */
+@media (prefers-color-scheme: dark) {
+  .support-menu-trigger svg {
+    stroke: white; /* Ensure the arrow is white for dark mode */
+  }
+}
+
+/* Style the dropdown wrapper */
+.support-menu-wrapper {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  background-color: #34495e; /* Background color for dropdown */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  margin-top: 8px;
+}
+
+/* Show the dropdown when open */
+.support-menu[open] .support-menu-wrapper {
+  display: flex;
+}
+
+/* Dropdown option styling */
+.support-option {
+  padding: 5px 10px;
+  color: white;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.support-option:hover {
+  background-color: #2c3e50;
+}
+
+/* SVG icon in each option */
+.support-option .support-icon svg {
+  width: 16px;
+  height: 18px;
+  fill: none;
+  stroke: white;
+  margin-right: 8px;
+}
+
+
+
+//Free Trial nav button
+.header-trial:hover {
+  opacity: 0.85;
+}
+
+.header-trial::before {
+  content: 'Start free trial';
+  border: 1px solid #0466FF;
+  color: #FFF;
   border-radius: 3px;
   padding: 5px 15px;
   font-size: 13px;
   font-weight: 600;
   display: inline-flex;
+  background: linear-gradient(35deg,#0466FF 0%,#0800FF 100%);
+  margin-left: -10px;
+  margin-right: -10px;
 }
 
-.header-support::after {
+.header-trial::after {
     display: none !important;
     content: none !important;
 }
 
-[data-theme='dark'] .header-support::before {
+[data-theme='dark'] .header-trial::before {
   background: transparent;
-  border: 1px solid #E5F4FA;
-  color: var(--ifm-navbar-link-color);
+  border: 0px solid #0466FF;
+  color: #FFF;
   border-radius: 3px;
-  padding: 4px 15px;
+  padding: 5px 15px;
   font-size: 13px;
   font-weight: 600;
   display: inline-flex;
+  margin-left: -10px;
+  margin-right: -10px;
+  background: linear-gradient(35deg, #0466FF 0%, #0800FF 30%, #000099 100%);
 }
 
-
 .markdown {
   h1 {
     font-size: 2rem !important;
@@ -504,31 +564,6 @@ html[data-theme='light'] .table-of-contents__left-border {
   height: 70%;
 }
 
-.navbar-item-github:hover {
-  opacity: 0.6;
-}
-.navbar-item-github:before {
-  margin-left: -1rem;
-  margin-top: 1px;
-  content: '';
-  width: 20px;
-  height: 20px;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  justify-content: center;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-html[data-theme='dark'] .navbar-item-github:before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
 .navbar-grid-menu:after {
   transition: opacity 0.2s;
   content: "";
@@ -545,7 +580,7 @@ html[data-theme='dark'] .navbar-item-github:before {
   opacity: 0.5;
 }
 
-.navbar-grid-menu:after, .navbar-github-link:after {
+.navbar-grid-menu:after {
   border-style: none !important;
   margin-left: -5px !important;
 }