0

I am trying to add some pipe (|) styling to my navigation.

My susy code is @include with-layout(6 inside, true){ @include span(1);

I have added &::before { content: " | "; }

but when I add &:first-child { &::before { content: " "; } }

it doesn't recognise that every instance of the navigation is not the first child - it sees all items in my html as first child. How do I fix this?

Also - any suggestions about how to make the pipe appear as a separator (ie in between susy navigation items) - I don't want to use a border-left because I want a subtle effect.

Thanks,

Victoria

troyster
  • 1
  • `:first-child` is looking at your html. It's not possible to help on this without knowing both the structure of your markup, and what the `&` in your Sass is referring to. The first-child issue has nothing to do with Susy, though your Susy code is also hard to make sense of. – Miriam Suzanne Mar 16 '15 at 17:01

2 Answers2

0

Thanks for answering... I'll try and post the code better for you now. What a pity I can't use jsfiddle or code pen to provide an example - it is such a pity that these code snippet sites only accept css and not scss and susy!!!

Ok...

The HTML is -

<div class="nav">
    <ul>
        <li><a class="button active" href="#home">Home</a></li>
        <li><a class="button" href="palms-for-sale.html">Shop</a></li> 
        <li><a class="button" href="ordering.html">Ordering</a></li>
        <li><a class="button" href="delivery.html">Delivery</a></li>
        <li><a class="button" href="plant-care.html">Care</a></li>
        <li><a class="button" href="about.html">About</a></li>
    </ul>
</div>

The scss is -

        .nav {

         @include susy-breakpoint($xmedium-bp, $medium) {
            @include span(8 of 8 at 0);
            @include margin-leader(1);
            height: 30px;
            line-height: 30px;
            vertical-align: middle;

            ul {
                li {
                    display: inline;
                }
            }
        }

        @include susy-breakpoint($large-bp, $large) {
                @include span(8 of 8 at 0);
            }

        ul {
            li {
                a {

                    &.button {

                        @include susy-breakpoint($xmedium-bp, $medium) {
                            @include with-layout(6 inside, true){
                                @include span(1);

                                &::before {
                                    content: " | ";
                                }

                                &:first-child {
                                    &::before {
                                        content: "";
                                    }
                                }
                            }
                        }

                        @include susy-breakpoint($large-bp, $large) {
                            @include with-layout(6 inside, true){
                                @include span(1);
                            }
                         }
                    }
                }
            }
        }
    }

I hope that I stripped the example back enough for you.

Thanks so much for looking.

Vx

troyster
  • 1
0

Ok - I got round the problem by using border-right set to 50% (which looks the same as a pipe and is naturally positioned in between the buttons) --- but I'd still be interested to know why the first-child selector doesn't work in the above code.

Now I'd like to remove the last border-right using last child!!! The principle is the same as the above example but I can post more code if you need it.

Thanks

troyster
  • 1