aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md')
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md18
1 files changed, 13 insertions, 5 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md
index a1d671a42..7cbc4e2c1 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md
@@ -109,7 +109,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
<nav class="navbar bg-light">
<div class="container">
<a class="navbar-brand" href="#">
- <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
+ <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
</a>
</div>
</nav>
@@ -123,7 +123,7 @@ You can also make use of some additional utilities to add an image and text at t
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
- <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
+ <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
@@ -708,7 +708,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
</ul>
</li>
</ul>
- <form class="d-flex" role="search">
+ <form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
@@ -768,7 +768,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
</ul>
</li>
</ul>
- <form class="d-flex" role="search">
+ <form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
@@ -792,11 +792,19 @@ Some additional CSS variables are also present on `.navbar-nav`:
{{< scss-docs name="navbar-nav-css-vars" file="scss/_navbar.scss" >}}
+Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="navbar-dark-css-vars" file="scss/_navbar.scss" >}}
+
### Sass variables
+Variables for all navbars:
+
{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
-{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}
+Variables for the [dark navbar](#color-schemes):
+
+{{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}
### Sass loop