I am using Calcite web for creating a navbar, and my code goes as follows.
<div class="grid-container" style="all: unset;">
<div class="column-24">
<!-- desktop sized navigation -->
<div class="tablet-hide">
<!-- logo / home -->
<img class="esri-logo">
<span class="top-nav-title">Title Here</span>
<!-- primary navigation sections -->
<nav class="top-nav-list" role="navigation" aria-labelledby="topnav">
<a class="top-nav-link" (click)="showTool1()">Tool 1</a>
<a class="top-nav-link" (click)="showTool2()">Tool 2</a>
<a class="top-nav-link" (click)="showTool3()">Tool 3</a>
</nav>
<!-- user specific dropdowns -->
<nav class="top-nav-list right" role="navigation" aria-labelledby="topnav">
<a class="top-nav-link icon-ui-user" href="#">Sign In</a>
<a class="btn btn-clear" href="#" style="margin-right: 5px; margin-top: 10px;">Sign Up</a>
</nav>
</div>
</div>
</div>
The resulting base is as follows.
![mrda_snap_sample.PNG mrda_snap_sample.PNG](https://community.esri.com/t5/image/serverpage/image-id/32912i7C2D560BFC45092C/image-size/large?v=v2&px=999)
As you can see (sorry for the small picture), the sign-in and sign-up options appear in the middle of the page and not in the left-hand corner (dir is equal to RTL for Arabic). After inspecting the element, it shows that the width for column 24 class property is set as shown below,
.column-24 {
width: 1440px;
max-width: 96vw;
}
If I set the width to 100%, it moves to the maximum width, i.e., 1843px, and not to the corner of the page.
![mrda_snap_sample1.png mrda_snap_sample1.png](https://community.esri.com/t5/image/serverpage/image-id/32913iFE519D07F517CFDF/image-size/large?v=v2&px=999)
How can we expand it further and move it to the end of the page and make it adjustable as the page resizes?
Abdur Rahman
GIS Developer