# Dev Diary Ep11 - Responsive Navigation / Q&A

**URL:** <https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909>\
**Category:** Elements\
**Created:** [March 26, 2024, 2:54pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909 "2024-03-26T14:54:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 26, 2024, 2:54pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/1 "2024-03-26T14:54:00Z")

</div>

Hey Weavers,

This week we take a look at the Extended Navigation Element and how that can work with our responsive breakpoint system. We also look at a few other tidbits and answer some of your questions.

As always, have a watch and let us know what you think.

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/d/edc927ec396605033b6d3495902f8275b2711f4e.jpeg "Dev Diary Ep11 - Responsive Navigation / Q&A") ](https://www.youtube.com/watch?v=KRtSByWYms0)

## We love feedback!

Remember, we’re building Elements in the open so we can get feedback as we go. We want to make sure we’re building the product everybody here wants (including us). Share your ideas and feedback in the comments below.

I’ll be back next Tuesday as usual.

Thanks,  
Dan & Team Realmac

---

<div class="post-metadata">

**Author:** ![gfcreative](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gfcreative/32/22974_2.png) [@gfcreative](https://forums.realmacsoftware.com/u/gfcreative)\
**Post date:** [March 26, 2024, 3:23pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/2 "2024-03-26T15:23:46Z")

</div>

Pretty simple control over the different types of menus. I do see one inconvenience comparing this to other third party platforms most of us are using now. With theirs you have one navigation that automatically transforms from full width nav to the mobile nav. And then there’s full control over the styling and behavior of each…all within one stack. With Elements we would have to completely create two independent navs (mobile and desktop).  
Also is there plans to add partials to this? So when we add the menu to other pages we can do editing once that affects all the menus across the site.

---

<div class="post-metadata">

**Author:** ![Tov](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tov/32/29403_2.png) [@Tov](https://forums.realmacsoftware.com/u/Tov)\
**Post date:** [March 26, 2024, 3:30pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/3 "2024-03-26T15:30:54Z")

</div>

Just wondering what specs my Mac will need to run Elements?

---

<div class="post-metadata">

**Author:** ![joeace](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeace/32/25504_2.png) [@joeace](https://forums.realmacsoftware.com/u/joeace)\
**Post date:** [March 26, 2024, 3:37pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/4 "2024-03-26T15:37:11Z")

</div>

I’m looking forward to see how sub pages are treated in the site navigation. Are there any limits to how many sub pages can be displayed in the navigation?

---

<div class="post-metadata">

**Author:** ![LEZ](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/lez/32/35617_2.png) [@LEZ](https://forums.realmacsoftware.com/u/LEZ)\
**Post date:** [March 26, 2024, 3:57pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/5 "2024-03-26T15:57:11Z")

</div>

AFAIK you haven’t shown what the app’s Settings/Preferences are like. Will we be able to change the size of fonts? The colors of the UI etc.

When you were showing the gallery of misc. icons and interface elements was that in Elements or another app?

I understand your philosophy regarding deleting files on our servers – makes sense to me. However, is there any way to mark files that are orphaned or to put them in an orphaned folder?

It’s all looking great and y’all should be rightly proud of your progress and dedication to creating the killer app.

Best, Lez

---

<div class="post-metadata">

**Author:** ![gthinx](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gthinx/32/26643_2.png) [@gthinx](https://forums.realmacsoftware.com/u/gthinx)\
**Post date:** [March 26, 2024, 8:58pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/6 "2024-03-26T20:58:20Z")

</div>

This is all still looking amazing and I can’t wait to get my grubby hands on this! Are there any plans to have a 404 solution built in or any seo schema? As a die hard weaver user for over 8 years, I sometimes wish these were a standard feature of rapid weaver

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 26, 2024, 9:16pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/7 "2024-03-26T21:16:04Z")

</div>

Dan you missed answering my question from last week - (apart from @upssjw as I had already recorded the video, we’ll get you that one next week).

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 26, 2024, 9:53pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/8 "2024-03-26T21:53:08Z")

</div>

was going to ask about entering tailwind code into Elements: just some of my practice code still learning, I have various formats of this, how would you enter this code into Elements ?

```auto
<div class="flex items-center flex-col lg:flex-row ">
     <div class="flex-1 w-56 text-center px-4 py-2 bg-orange-300">Responsive<div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-blue-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-red-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-purple-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-yellow-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     </div>

```

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 27, 2024, 3:39pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/9 "2024-03-27T15:39:20Z")

</div>

> [@gfcreative](#):
>
> Pretty simple control over the different types of menus. I do see one inconvenience comparing this to other third party platforms most of us are using now. With theirs you have one navigation that automatically transforms from full width nav to the mobile nav.

Yes, we initially did this, but felt it was too limiting. Our goal is to build a really flexible system. We know how important it is that EVERYONE wants to build sometime different, so we’re trying to build the tools that allow our users to do that.

Having said that, there’s nothing stopping us (or a third-party) from building a menu that does exactly what you want. We’re also open to changing things once users get the beta and give us feedback on the Elements.

> [@gfcreative](#):
>
> Also is there plans to add partials to this? So when we add the menu to other pages we can do editing once that affects all the menus across the site.

We have been working on something very special related to this, but we’re not quite ready to share it… keep an eye on our videos in April 😉

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 27, 2024, 3:43pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/10 "2024-03-27T15:43:29Z")

</div>

> [@Tov](#):
>
> Just wondering what specs my Mac will need to run Elements?

It requires macOS 13 (Ventura) or newer and will run on both Intel and Apple Silicon based Macs.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 27, 2024, 3:59pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/11 "2024-03-27T15:59:56Z")

</div>

> [@joeace](#):
>
> I’m looking forward to see how sub pages are treated in the site navigation. Are there any limits to how many sub pages can be displayed in the navigation?

Just like RapidWeaver Classic you can create as many subpages as required in the app, however, it’ll be down to each Element on how many levels it supports.

Right now the Compact and Extended Elements support two levels. @ben has been working on an Element called “Tree Navigation” this will be super flexible and support unlimited levels. It’s perfect for information dense sites with lots of pages — I’ll see if I can demo that one next week!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 27, 2024, 4:03pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/12 "2024-03-27T16:03:24Z")

</div>

> [@LEZ](#):
>
> AFAIK you haven’t shown what the app’s Settings/Preferences are like. Will we be able to change the size of fonts? The colors of the UI etc.

You can choose between dark and light mode, and we use the system’s accent colour in the UI for Highlights, it’s pretty cool.

 ![CleanShot 2024-03-27 at 4 .01.19@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/b/bb69a81446cf34c2dcbda6453ef9279958f7b1e8.jpeg)

> [@LEZ](#):
>
> When you were showing the gallery of misc. icons and interface elements was that in Elements or another app?

Yes, I was designing those in an app called [Sketch](https://www.sketch.com/apps/).

> [@LEZ](#):
>
> I understand your philosophy regarding deleting files on our servers – makes sense to me. However, is there any way to mark files that are orphaned or to put them in an orphaned folder?

That’s a good idea on how to handle it. I’ll add it for a future consideration (i.e. it won’t be in the beta).

> [@LEZ](#):
>
> It’s all looking great and y’all should be rightly proud of your progress and dedication to creating the killer app.

Awww, thank you ☺

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 27, 2024, 4:04pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/13 "2024-03-27T16:04:30Z")

</div>

> [@gthinx](#):
>
> This is all still looking amazing and I can’t wait to get my grubby hands on this! Are there any plans to have a 404 solution built in or any seo schema?

Not right now, but we’ll give it some serious thought, especially the “SEO Schema” - what exactly did you have in mind?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 27, 2024, 4:06pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/14 "2024-03-27T16:06:20Z")

</div>

> [@upssjw](#):
>
> Dan you missed answering my question from last week - (apart from @upssjw as I had already recorded the video, we’ll get you that one next week).

Doh, sorry, here we go…

> [@Got a question about RapidWeaver Elements?](https://forums.realmacsoftware.com/t/got-a-question-about-rapidweaver-elements/42856/11):
>
> nice and easy, thanks for the video, really liking the menu element, I previously asked (on Circle) if you could offset out of the top bar, eg your Realmac logo could be half in half out at the bottom, overlap

That’s very specific and not built-in. However, you could certainly do it with a custom/tailwind css class!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 27, 2024, 4:08pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/15 "2024-03-27T16:08:56Z")

</div>

> [@upssjw](#):
>
> was going to ask about entering tailwind code into Elements: just some of my practice code still learning, I have various formats of this, how would you enter this code into Elements ?
> 
> ```auto
> <div class="flex items-center flex-col lg:flex-row ">
> <div class="flex-1 w-56 text-center px-4 py-2 bg-orange-300">Responsive<div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
> <div class="flex-1 w-56 text-center px-4 py-2 bg-blue-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
> <div class="flex-1 w-56 text-center px-4 py-2 bg-red-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
> <div class="flex-1 w-56 text-center px-4 py-2 bg-purple-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
> <div class="flex-1 w-56 text-center px-4 py-2 bg-yellow-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
> </div>
> 
> ```

Ah, you’d use the HTML Element (not styled… yet). Here’s a very quick demo using your supplied HTML…

---

<div class="post-metadata">

**Author:** ![gfcreative](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gfcreative/32/22974_2.png) [@gfcreative](https://forums.realmacsoftware.com/u/gfcreative)\
**Post date:** [March 27, 2024, 4:17pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/16 "2024-03-27T16:17:49Z")

</div>

Thank you Dan. As far as having to work with multiple menus I would have to physically do it to have a real opinion over whether it’s simpler or not than the way I’ve been doing it now. Looking forward to seeing more updates…and eventually diving in.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 27, 2024, 4:57pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/17 "2024-03-27T16:57:55Z")

</div>

Dan the colours are missing it shows all the colours when using tailwind, see here my practice  
[https://sjwjaw.co.uk](https://sjwjaw.co.uk)

---

<div class="post-metadata">

**Author:** ![LEZ](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/lez/32/35617_2.png) [@LEZ](https://forums.realmacsoftware.com/u/LEZ)\
**Post date:** [March 27, 2024, 5:39pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/18 "2024-03-27T17:39:02Z")

</div>

Thanks Dan. I gotta say though that me eyes ain’t so good as they woz! Hence the question about the text size. Will Elements respond to the macOS accessibility thang where you can select larger fonts for apps that play ball?

Cheers.

---

<div class="post-metadata">

**Author:** ![gthinx](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gthinx/32/26643_2.png) [@gthinx](https://forums.realmacsoftware.com/u/gthinx)\
**Post date:** [March 27, 2024, 8:48pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/19 "2024-03-27T20:48:59Z")

</div>

Maybe just a little schema structure like type of organisation/services etc to assist search engines better differentiate each site’s offerings, maybe a couple of fields in the tab where the seo description is? There are a number of great ways I currently do this but I believe having this built in, is something that no other platform I’ve seen is offering. Keep up the great work!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 28, 2024, 8:13am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909/20 "2024-03-28T08:13:12Z")

</div>

> [@upssjw](#):
>
> Dan the colours are missing it shows all the colours when using tailwind, see here my practice  
> [https://sjwjaw.co.uk](https://sjwjaw.co.uk)

I needed to add the colours to the Theme Studio (see video below). However, it’s still missing the gradient on the dot, I’m guessing it’s just a value that’s not defined in our Tailwind setup - @ben will know exactly why that is (and I’m sure there’s a way of working around it).

While this is not the intended use case, it’s pretty cool this stuff works ☺

[Next page](https://forums.realmacsoftware.com/t/dev-diary-ep11-responsive-navigation-q-a/42909.md?page=2)