Skip to content

Commit

Permalink
css edit
Browse files Browse the repository at this point in the history
  • Loading branch information
@matkuliak
matkuliak committed Oct 2, 2024
1 parent b6f98d9 commit 78dbd2d
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 13 deletions.
74 changes: 73 additions & 1 deletion src/crate/theme/rtd/crate/sections/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,77 @@
<a class="brand w-nav-brand" href="/" title="cratedb.com">
<img src="{{ pathto('_static', 1) }}/images/cratedb-logo.svg" alt="CrateDB Logo" width="218" height="36">
</a>

<nav class="w-nav-menu main-nav" role="navigation">
<ul id="menu-main-navigation" class="menu">
<!-- Product Menu -->
<li class="main-site-menu-item main-site-menu-item-product main-site-menu-item-has-children">
<a class="main-site-menu-link" href="#">Product</a>
<ul class="main-site-sub-menu">
<li class="main-site-menu-item main-site-menu-item-has-children">
<a class="main-site-menu-link" href="#">Database</a>
<ul class="main-site-sub-menu">
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/database/">Overview</a>
</li>
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/database/sql-examples">SQL examples</a>
</li>
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/database/integrations">Integrations</a>
</li>
</ul>
</li>
<li class="main-site-menu-item main-site-menu-item-has-children">
<a class="main-site-menu-link" href="#">Data Models</a>
<ul class="main-site-sub-menu">
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/data-model/time-series">Time-series</a>
</li>
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/data-model/json">Document/JSON</a>
</li>
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/data-model/vector">Vector</a>
</li>
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/data-model/full-text">Full-text</a>
</li>
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/data-model/geospatial">Spatial</a>
</li>
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/data-model/relational">Relational</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- Use Cases Menu -->
<li class="main-site-menu-item main-site-menu-item-has-children">
<a class="main-site-menu-link" href="#">Use Cases</a>
<ul class="main-site-sub-menu">
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/use-cases/ai-ml-database">AI/ML</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/use-cases/iot-database">Internet of Things</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/use-cases/digital-twins-database">Digital Twins</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/use-cases/log-database">Log Analysis</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/use-cases/database-consolidation">Database Consolidation</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/use-cases/chatbots">AI-Powered Chatbots</a></li>
</ul>
</li>
<!-- Industries Menu -->
<li class="main-site-menu-item main-site-menu-item-has-children">
<a class="main-site-menu-link" href="#">Industries</a>
<ul class="main-site-sub-menu">
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/industries/energy">Energy</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/industries/fmcg">FMCG</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/industries/logistics">Logistics</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/industries/oil-gas-mining">Oil, Gas & Mining</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/industries/smart-cities">Smart City Solutions</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/industries/tech-platforms">Technology Platforms</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/industries/telco">Telco</a></li>
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/industries/transportation">Transportation</a></li>
</ul>
</li>
<!-- Resources Menu -->
<li class="main-site-menu-item main-site-menu-item-has-children">
<a class="main-site-menu-link" href="#">Resources</a>
Expand All @@ -23,6 +91,10 @@
<li><a class="main-site-menu-link" target="_blank" href="https://cratedb.com/event">Events</a></li>
</ul>
</li>
<!-- Pricing -->
<li class="main-site-menu-item">
<a class="main-site-menu-link" target="_blank" href="https://cratedb.com/pricing">Pricing</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page navlink w-nav-link">
<a class="menu-link" target="_blank" href="https://cratedb.com/community">Community</a>
</li>
Expand Down
45 changes: 33 additions & 12 deletions src/crate/theme/rtd/crate/static/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1633,6 +1633,7 @@ dt:target, span.highlighted {
/* fix ul in header nav */
header#top #menu-main-navigation {
margin: 0;
list-style-type: none;
}

/* -- tables ---------------------------------------------------------------- */
Expand Down Expand Up @@ -1690,11 +1691,9 @@ td > :last-child {
margin-bottom: 0px;
}

/* header navigation from main site */

/* General menu styling */
/* Main menu styling */
.main-site-menu {
list-style-type: none;
list-style: none;
margin: 0;
padding: 0;
display: flex;
Expand All @@ -1708,14 +1707,17 @@ td > :last-child {
padding: 10px 15px;
display: block;
font-weight: 400; /* Normal weight for consistency */
white-space: nowrap; /* Prevent wrapping */
}

/* Hide sub-menus initially */
/* Hide all sub-menus initially */
.main-site-sub-menu {
display: none;
position: absolute;
top: 100%; /* Position the submenu directly below the parent */
left: 0; /* Align submenu to the left of the parent menu */
background-color: #fff; /* White background for sub-menu */
list-style-type: none;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ddd; /* Light gray border for sub-menus */
Expand All @@ -1728,24 +1730,42 @@ td > :last-child {
display: block;
}

/* Special case for the Product menu with two categories side by side */
.main-site-menu-item-product .main-site-sub-menu {
display: flex;
gap: 20px; /* Space between Database and Data Models */
padding: 10px;
}

/* Submenus under Database and Data Models should appear below their parent items */
.main-site-menu-item-has-children .main-site-sub-menu {
top: 100%; /* Display below the parent */
left: 0; /* Align to the left */
position: absolute;
display: none;
}

/* Show nested submenus on hover */
.main-site-menu-item-has-children:hover > .main-site-sub-menu {
display: block;
}

/* Ensure that sub-menu items stack vertically */
.main-site-sub-menu li {
display: block;
width: 200px; /* Adjust as needed */
width: 200px; /* Adjust width as needed */
}

/* Style for sub-menu links */
.main-site-sub-menu a {
padding: 10px;
display: block;
white-space: nowrap;
color: #007bff; /* Blue color for hover links */
color: #000; /* Default color for sub-menu links */
}

/* Add hover effect */
.main-site-menu-link:hover, .main-site-sub-menu a:hover {
background-color: #f8f9fa; /* Light gray background for hover */
color: #0056b3; /* Darker blue for hovered links */
color: #111; /* Darker color for hovered links */
}

/* Ensure the parent .main-site-menu-item is positioned relatively for sub-menu placement */
Expand All @@ -1756,6 +1776,7 @@ td > :last-child {
/* Hide the entire navigation on mobile (max width: 768px) */
@media (max-width: 768px) {
.main-site-menu {
display: none; /* This hides the whole navigation on mobile */
display: none; /* This hides the whole navigation on mobile */
}
}

0 comments on commit 78dbd2d

Please sign in to comment.