• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Positioning NAVBAR on the side?

Community Beginner ,
Sep 13, 2023 Sep 13, 2023

Copy link to clipboard

Copied

How do I position my "navbar" alongside? do I use "aside" element to do this?

Views

158

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 13, 2023 Sep 13, 2023

Copy link to clipboard

Copied

Copy and paste the following code into a new document.

 

 

 

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
</head>

<body>
    <div class="container-xxl">
        <div class="row row-cols-1 row-cols-lg-2">
            <div class="col-lg-2 bg-light">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar1_collapse">
                        <div class="navbar-nav flex-column">
                            <a class="nav-item nav-link active" href="#">Home</a>
                            <a class="nav-item nav-link" href="#">About</a>
                            <a class="nav-item nav-link" href="#">Contact</a>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="col">
                <h1>Fancy display heading</h1>
                <p>A nice paragraph</p>
                <p>A nice paragraph</p>
                <p>A nice paragraph</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>

</html>

 

The above code was created using Wappler - no hand coding.

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied


@sambruskin wrote:

How do I position my "navbar" alongside? do I use "aside" element to do this?


 

This is a bit of a grey area and widely open to loose interpretation. Why not just use the <nav></ nav> element, that's not open to debate or question, it's fairly obvious.

 

If you read about the aside there is some definitive usages such as pull quotes which are somehow related to the main section of the page and yet are supposed to be indirectly related and other usages which could be for advertising. Advertising what l don't know, maybe monkies for sale on a website unrelated to monkey information. To be honest, it poses more questions than what it actually is supposed to solve. I still don't fully understand some of the nonsense written in the official specs.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

it's true that the naming of regions has always raised questions, and the arrival of html5 hasn't succeeded in answering them unanimously. I remember that at the time Andy Clarke published a list of naming conventions for classes and IDs, https://stuffandnonsense.co.uk/archives/naming_conventions_table.html, which was already quite interesting at the time.

 

this link now https://w3c.github.io/html-reference/elements.html#elements is quite interesting to clarify the role but also the nature of content allowed

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

quote

do I use "aside" element to do this?

By @sambruskin

=============

No.  It's not necessary. Nav = navigation.  Where it's placed or positioned on the page is irrelevant.  It's still a navigation element.

Aside = ancillary content that's secondary to main content.  Some examples might be ads, maps or newsfeeds.

 

Below is an off-canvas push menu with Bootstrap Icons.

image.png

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!--Bootstrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
<style>
/**Custom style for pink Navbar & Footer**/
#sidebar-nav a, footer {background:#B84A80; 
 color:white;
 font-size:1.35rem }
</style>
</head>

<body>
<div class="container-fluid">
<header class="col-10 mx-auto">
<img class="img-fluid" src="https://dummyimage.com/1200x200" alt="hero image placeholder"></header>
<div class="row flex-nowrap">
<div class="col-auto px-0">

<!--Sidebar/Push Menu-->
<nav>
<div id="sidebar" class="collapse collapse-horizontal show border-end">
<div id="sidebar-nav" class="list-group border-0 rounded-0 text-sm-start min-vh-100">
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-bootstrap"></i>
<span>Item</span>
</a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-film"></i>
<span>Item</span></a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-heart"></i>
<span>Item</span></a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-bricks"></i>
<span>Item</span></a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-clock"></i>
<span>Item</span></a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-archive"></i>
<span>Item</span></a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-gear"></i>
<span>Item</span></a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-calendar"></i>
<span>Item</span></a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-envelope"></i>
<span>Item</span></a>
</div>
</div>
</nav>
</div>
<!--Begin main content-->
<main class="col ps-md-2 pt-2">
<a href="#" data-bs-target="#sidebar" data-bs-toggle="collapse" class="border rounded-3 p-1 text-decoration-none"><i class="bi bi-list bi-lg py-2 p-1"></i> Menu</a>
<div class="page-header pt-3">
<h2>Bootstrap 5 Sidebar Menu - Simple</h2>
</div>
<p class="lead">An off-canvas 
"push"</p>
<hr>
<div class="row">
<div class="col-md-6">
<p>This is a simple collapsing sidebar menu for Bootstrap 5. Unlike the Offcanvas component that overlays the content, this sidebar will "push" 
the content. Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
</div>
<div class="col-md-6">
<p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
</div>
</div>
</main>
</div>
</div>
<div class="container-fluid">
<div class="row">
<footer class="text-center">
Footer goes here...
</footer>
</div>
</div>
<!--latest minified JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>

 

Hope that helps.

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 17, 2023 Sep 17, 2023

Copy link to clipboard

Copied

LATEST

That has been quite helpful. Thanks a lot.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines