Navigation widget edit..

Russ

Pixel Exit Staff
Not easily with CSS no.

I have a vertical navigation block I've been working on, would you want it to function like this where the sub-links would be the sub-forums?

nav.gif
 

Russ

Pixel Exit Staff
So I haven't done a ton of testing, and I'm a little strained for time but I hope this points you in the right version. This is a snippet of code from the new style I'm working on so don't mind the class names, but basically extra.less:

Code:
.xbSidebar-nav-list
{
    .m-listPlain();
    li
    {
      
        &:first-of-type a { border-top-width: 0; }
    }
    li a
    {
        display: block;
        padding: 8px 15px;
        float: none;
        border-top: 1px solid @xf-borderColorFaint;
    }
    .xbVerticalNav-linkHolder
    {
        display: flex;
        .xbVerticalNav-link
        {
            flex-grow: 1;
        }
        .xbVerticalNav-toggle
        {
        flex-grow: 0;
        position: relative;
        text-decoration: inherit;
        &:before
        {
            content: '';
            position: absolute;
            left: 0;
            top: (@xf-paddingLarge - 4px);
            bottom: (@xf-paddingLarge - 4px);
            width: 0;
            border-left: 1px solid @xf-borderColorFaint;
        }

        &:after
        {
            .m-faBase();
            .m-faContent(@fa-var-chevron-down, 1em);
        }
        }
    }
    .xbVerticalNav-subList
    {
        .m-listPlain();
        .m-transitionFadeDown();
    }
}

Then add a HTML WIDGET, make sure advanced mode is checked and place the html:

Code:
<div class="block xbSidebar-nav">
    <div class="block-container">
        <h3 class="block-minorHeader">
            Custom vertical nav
        </h3>
        <div class="block-blody">
            <ul class="xbSidebar-nav-list">
               <li>
                  <div class="xbVerticalNav-linkHolder ">
                    <a href="basiclink" class="xbVerticalNav-link " data-xf-key="1" data-nav-id="home">Basic Link</a>
                  </div>
               </li>
               <li>
                  <div class="xbVerticalNav-linkHolder is-selected" data-has-children="true">
                    <a href="forumlink#1" class="xbVerticalNav-link p-navEl-link--splitMenu " data-nav-id="forums">Forums</a>
                    <a data-xf-click="toggle" data-target="< :up :next" class="xbVerticalNav-toggle" role="button" tabindex="0" aria-label="Toggle expanded" aria-expanded="false" aria-haspopup="true"></a>
                  </div>
                  <div class="xbVerticalNav-subList">
                    <!--<h4 class="menu-header">Forums</h4>-->
                    <a href="subforum1link" class="menu-linkRow">Sub-forum #1</a>
                    <a href="subforum2link" class="menu-linkRow">Sub-forum #2</a>
                    <a href="subforum3link" class="menu-linkRow">Sub-forum #3</a>
                  </div>
               </li>
            </ul>
        </div>
    </div>
</div>

It's laid out somewhat neat...
 

cannabis ape

Customer
Awesome. I try it out tomorrow and play with it.

Working on that forum on my own seems like a 18 hour days feels like 3 hours.
 

cannabis ape

Customer
Aight, got it working with a small edit.

I deleted this part:
Code:
    <div class="block-container">
        <h3 class="block-minorHeader">
            Custom vertical nav
        </h3>
Cause I had a box inside a box but looks dandy now :)
 

cannabis ape

Customer
Ok I noticed something.

I wanted to see how it looks if I place the sidebar on the left side but then all widgets end up about the forum section in full with.

If I disable the widget the sidebar looks normal on the left.
 

Russ

Pixel Exit Staff
Ok I noticed something.

I wanted to see how it looks if I place the sidebar on the left side but then all widgets end up about the forum section in full with.

If I disable the widget the sidebar looks normal on the left.

I mentioned to tick "Advanced mode" on the widget :D, that would remove the double border + title.

You need to remove the bottom closing </div> though since you removed the first opening div.
 

cannabis ape

Customer
I mentioned to tick "Advanced mode" on the widget :D, that would remove the double border + title.

You need to remove the bottom closing </div> though since you removed the first opening div.
Ow yeah, totally read over that :watching::smuggrin:

Mi going to try right now
 

cannabis ape

Customer
You can keep it unchecked and still remove the code you did, just remove one closing </div> from the bottom. Probably messing the layout up.
Gheghe yeah that stupid div was causing it, it was even showing read if I checked it again,,that is if I weren't seeing double by now. :android:
 

cannabis ape

Customer
I've seen a similar widget like this on 1x but that one remembers which tab you got opened or closed, you know how that is done by any chance?

And last thing, I've had 6 different versions now haha but I would like the button and category title be one.

Closest version I got was this one but then I need the arrow back at the right again so the whole bar is clickable and turns into the dropdown
almost.png


Thank you!
 
Last edited:

Russ

Pixel Exit Staff
Sure man NP. You mean that part from remembering open or closed?

The second thing you probably know or you meant that too?

Sorry, it remembering would require quite a bit of code would be custom work.

The option of it being one title + dropdown should be an easy fix.
 

cannabis ape

Customer
Sorry, it remembering would require quite a bit of code would be custom work.

The option of it being one title + dropdown should be an easy fix.
Ahh ok, well once I got some money to burn I will surely come hire you :D

The second thing I also thought so but I already have tried several things and ended up with 6 different version and none achieved what I wanted, Came close with that one screenshot but yeah, I know you can fix that in seconds, so if you can tell me that one I'll be on my way again.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.