Fix navbar alignment by adding navbar_align configuration to PyData Sphinx Theme (#162)

* Improve navbar alignment

Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

* Also updated in {{cookiecutter.package}}

Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

* Inculding css file in cookiecutter_Package

Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

---------

Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

Author: bhanushaliparthhitesh

docs/source/_static/css/custom.css

@@ -86,3 +86,8 @@ body[data-hide-sidebar="true"] .bd-main {
   flex-grow: 1;
   max-width: 75%;
 }
+
+.bd-header .navbar-header-items__start {
+  margin-right: 0 !important;
+  padding-right: 1.5rem;
+}

docs/source/conf.py

@@ -69,7 +69,7 @@
 
 html_theme_options = {
     "navbar_start": ["navbar-logo"],
-    "navbar_center": ["navbar-nav"],
+    "navbar_align": "left",
     "icon_links": [
         {
             "name": "GitHub",

{{cookiecutter.package_name}}/docs/source/_static/css/custom.css

@@ -0,0 +1,93 @@
+html[data-theme=dark] {
+    --pst-color-primary: #04B46D;
+    --pst-color-link: var(--pst-color-primary);
+  }
+
+html[data-theme=light] {
+  --pst-color-primary: #03A062;
+  --pst-color-link: var(--pst-color-primary);
+}
+
+body .bd-article-container {
+max-width: 100em !important;
+}
+/* Custom CSS for the documentation site */
+/* prevent logo from being too wide and text clashing with next item */
+/* See https://github.com/pydata/pydata-sphinx-theme/issues/1143#issuecomment-2468763375 */
+
+.navbar-header-items__start .navbar-item {
+  width: 100%;
+}
+
+.navbar-item .navbar-brand {
+  width: 100%;
+}
+
+.navbar-brand img {
+  min-width: 0;
+  height: auto;
+  max-height: 100%;
+  flex-shrink: 1;
+}
+
+.navbar-brand p {
+  flex: 0 1 auto;
+}
+
+/* sponsors */
+
+.col {
+flex: 0 0 50%;
+max-width: 50%;
+}
+
+.img-sponsor {
+height: 50px;
+padding-top: 5px;
+padding-right: 5px;
+padding-bottom: 5px;
+padding-left: 5px;
+}
+
+.things-in-a-row {
+display: flex;
+flex-wrap: wrap;
+justify-content: space-between;
+}
+
+/* grids to match theme colors */
+.sd-card-icon {
+  color: var(--sd-color-primary);
+  font-size: 1.5em;
+  margin-bottom: 0.5rem;
+}
+
+.sd-card {
+  padding: 1.5rem;
+  transition: transform 0.2s;
+}
+
+.sd-card:hover {
+  transform: translateY(-5px);
+}
+
+/* Ensuring content area uses full width when sidebar is hidden */
+.bd-page-width {
+  max-width: 90% !important;
+}
+
+/* Hide sidebar on pages with hide-sidebar metadata */
+body[data-hide-sidebar="true"] .bd-sidebar-primary {
+  display: none !important;
+}
+
+/* Expand content width when sidebar hidden */
+body[data-hide-sidebar="true"] .bd-main {
+  flex-grow: 1;
+  max-width: 75%;
+}
+
+.bd-header .navbar-header-items__start {
+  margin-right: 0 !important;
+  padding-right: 1.5rem;
+}

{{cookiecutter.package_name}}/docs/source/conf.py

@@ -92,6 +92,7 @@
 
 # Customize the theme
 html_theme_options = {
+    "navbar_align": "left",
     "icon_links": [
         {
             # Label for this link