# Navigation full width with CSS

**URL:** https://community.glideapps.com/t/navigation-full-width-with-css/77265
**Category:** Ask for Help
**Created:** [October 23, 2024, 1:49am UTC](https://community.glideapps.com/t/navigation-full-width-with-css/77265 "2024-10-23T01:49:40Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Safe\_Supply](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/safe_supply/32/62703_2.png) [@Safe\_Supply](https://community.glideapps.com/u/Safe_Supply)
#### Post date: [October 23, 2024, 1:49am UTC](https://community.glideapps.com/t/navigation-full-width-with-css/77265/1 "2024-10-23T01:49:40Z")

</div>

Am trialling if using CSS improves the layout of my app. So far I’d say definitely yes, and have been able to expand the content to full width which is great as I have data tables that am trying to use, but wondering how to wrap content that is multiple lines in length  
Please see take a look at this attachment:

 ![Screenshot 2024-10-23 at 2.46.33 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/7/a75beee43b4a9d7b28a5af231bec566b09941292.png)

And to make the top menu full width, is that possible as I have multiple items on a submenu:

 ![Screenshot 2024-10-23 at 2.38.33 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aaa13f5fc56a73727e64ed6270ea075eeae0153c.png)

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 23, 2024, 4:41am UTC](https://community.glideapps.com/t/navigation-full-width-with-css/77265/2 "2024-10-23T04:41:09Z")

</div>

> [@Safe\_Supply](#):
>
> but wondering how to wrap content that is multiple lines in length

If the component is a data grid, then CSS cannot change it; unless your component is a table, then use the following code:

```auto
#page-root .tableClass tr > td:nth-child(3) > div > span {
    max-height: 5rem;
    overflow-y: auto;
    white-space: wrap;
}

```

> [@Safe\_Supply](#):
>
> And to make the top menu full width, is that possible as I have multiple items on a submenu:

Regarding the navigation menu, Glide allows a maximum of 6 visible tabs, and any additional tabs are grouped into a ‘more’ fly-out menu. While CSS can make the navigation bar full width, but it cannot pull the tabs from the ‘more’ menu into the main navigation.

---

<div class="post-metadata">

### Author: ![Safe\_Supply](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/safe_supply/32/62703_2.png) [@Safe\_Supply](https://community.glideapps.com/u/Safe_Supply)
#### Post date: [October 24, 2024, 1:52am UTC](https://community.glideapps.com/t/navigation-full-width-with-css/77265/3 "2024-10-24T01:52:38Z")

</div>

Ah ok, thanks for the info and code…