coldwhitefire

Just an update, this has now been resolved. For anyone that wants to do something similar in the future, the full code is here.
HTML here <div class="row"> <div class="col"> <h1>Heading here</b></h1> <div class="tabs"> <div class="tab"> <input type="checkbox" id="chck1"> <label class="tab-label" for="chck1"> <h2>Title here. </h2> </label> <div class="tab-content"> <div class="container"> <img src="URL" class="container__image"> <div class="container__text"> <p> Some internal content here. </p> </div> </div> </div> </div> <div class="tab"> <input type="checkbox" id="chck2"> <label class="tab-label" for="chck2"><h2> A title here</h2></label> <div class="tab-content"> <div class="container"> <img src="URL" class="container__image"> <div class="container__text"> <p> Some internal content here. </p> </div> </div> </div> </div> /*CSS here*/ // General input { position: ; opacity: 0; z-index: -1; } // Layout .row { display:flex; .col { flex:1; &:last-child { margin-left: 1em; } } } /* Accordion styles */ .tabs { border-radius: 0px; overflow: hidden; } .tab { width: 100%; color: ; overflow: hidden; &-label { display: flex; padding: 1em; background: ; justify-content: space-between; font-weight: bold; border-bottom: 1px solid #f7b8a1; padding-bottom:20px; cursor: pointer; /* Icon */ &:hover { background: ; } &::after { content: "\276F"; width: 1em; height: 1em; text-align: center; transition: all .35s; } } &-content { max-height: 0; padding: 0 0em; color: ; background: ; transition: all .35s; } &-close { display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: ; cursor: pointer; &:hover { background: ; } } } // :checked input:checked { + .tab-label { background: ; &::after { transform: rotate(90deg); } } ~ .tab-content { max-height: 150vh; padding-top: 10px; } } .container { &__image { display: inline-block; vertical-align: top; width: 25%; margin-right: 25px; position: relative; min-width: 200px; margin-bottom: 20px; } &__text { display: inline-block; width: 60%; font-size: 1.3em; overflow: visible; @media (max-width: 1000px) { width: 100%; } } }  

Why not just allow the option to have regular navigation inside the member area? What's the purpose for stacking everything into one menu? 

Also why use code to fix what should be already available? Seems odd to me. 

Why not just allow the option to have regular navigation inside the member area? What's the purpose for stacking everything into one menu? 

Also why use code to fix what should be already available? Seems odd to me. 

When you're building your site on a free trial, you can try out Member Sites for free, but your visitors can't become members until you've got both a Website Plan (Personal, Business or Commerce) and a Digital Products plan (Starter, Core or Pro).
Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you very much for clarifying that. It's not clear because it appears in my website builder, but it doesn't say I need to pay or subscribe to anything else. Thanks!
 

Also here with this issue. My client has a lot of pages and it looks bad in one folder

Site URL: https://cramlab.org
Hi there
I'm having difficulty setting up a usable member area navigation. I simply want a new dropdown menu item to appear when a member signs in, but this appears difficult in 7.1.
I select "replace main navigation", but then I am unable to create anything more than a single navigation item so everything appears in the same dropdown. There is the option to add pages to the member area, which of course I could use to add links, but I am unable to unlink this from the dropdown menu item.
I can't imagine I'm the first person to want something more than just a single menu item in a members area so assume I'm doing something silly.
Thanks in advance for the help,
Chris