Menu icon Foundation

My Posts


  • 11
    Replies
  • Orbit Bullets

    By Taylor Mudd

    Orbitbulletsscssjs

    Trying to move the bullets of an Orbit up over the top of the orbit itself but margin-top:-10%; or any percentage isnt just moving the bullet container it is moving the whole orbit and cutting out my image. I assume this is all the SCS... (continued)

    Last Reply by Taylor Mudd about 4 years ago






My Comments

Taylor Mudd commented on Taylor Mudd's post about 4 years

bump

Taylor Mudd commented on Taylor Mudd's post about 4 years

Ah yes, it is how I thought it was going to look, I meant like in your example, on the left-hand side the text MySite, I have an image in that section of the top bar and when it scales down to mobile I want that image/your text to remain visible...

Is this possible?

Taylor Mudd commented on Taylor Mudd's post about 4 years

Not sure if it's not showing properly because I'm currently on mobile but I'll check when I get home, it's an image in the name class for top bar but it disappears on mobile... I'll get back to you when I get home

Taylor Mudd commented on Taylor Mudd's post about 4 years

Thank you guys so much, you have been a great help :)

Taylor Mudd commented on Taylor Mudd's post about 4 years

@RafiBenkual That solution was great and would have worked if it weren't for responsive demands...

The whole site is meant to be responsive, this is a much harder scenario having to absolutely position the element due to obvious varying screen sizes.... Can anyone do this, keeping it responsive?

Taylor Mudd commented on Taylor Mudd's post about 4 years

bump

Taylor Mudd commented on Taylor Mudd's post over 4 years

That didn't work, simply added dis-functional buttons above the orbit and left the old ones where they were.... This is such a pain..

Taylor Mudd commented on Taylor Mudd's post over 4 years

I'm not sure how to incorporate your changes into my orbit HTML code, this is what mine looks like
HTML
<div class="row fullwidth" id="hero-images">
<div class="large-12 columns fullwidth" id="hero-orbit">
<ul class="example-orbit-content" data-orbit>
<li data-orbit-slide="image-1">
<div>
<img src="img/hero-sausages.png">
</div>
</li>
<li data-orbit-slide="image-2">
<div>
<img src="img/hero-sausages.png">
</div>
</li>
<li data-orbit-slide="image-3">
<div>
<img src="img/hero-sausages.png">
</div>
</li>
<li data-orbit-slide="image-4">
<div>
<img src="img/hero-sausages.png">
</div>
</li>
</ul>
</div>
</div>

Taylor Mudd commented on Taylor Mudd's post over 4 years

Could one of you guys possibly give a live example of how to do this? I have had countless attempts at this over the past few days and I can't seem to get any closer... Would really appreciate any assistance..

Taylor Mudd commented on Taylor Mudd's post over 4 years

Yeah, sorry I should have specified but yes I'm going for the effect @dims posted above, Anyone know if there is a blanket class I can affect which will affect the top bar entirely? other than having to change every scenario of the top-bar class...

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Taylor Mudd's post about 4 years

bump

You commented on Taylor Mudd's post about 4 years

Ah yes, it is how I thought it was going to look, I meant like in your example, on the left-hand side the text MySite, I have an image in that section of the top bar and when it scales down to mobile I want that image/your text to remain visible...

Is this possible?

You commented on Taylor Mudd's post about 4 years

Not sure if it's not showing properly because I'm currently on mobile but I'll check when I get home, it's an image in the name class for top bar but it disappears on mobile... I'll get back to you when I get home

You commented on Taylor Mudd's post about 4 years

Thank you guys so much, you have been a great help :)

You commented on Taylor Mudd's post about 4 years

@RafiBenkual That solution was great and would have worked if it weren't for responsive demands...

The whole site is meant to be responsive, this is a much harder scenario having to absolutely position the element due to obvious varying screen sizes.... Can anyone do this, keeping it responsive?

You commented on Taylor Mudd's post about 4 years

bump

You commented on Taylor Mudd's post over 4 years

That didn't work, simply added dis-functional buttons above the orbit and left the old ones where they were.... This is such a pain..

You commented on Taylor Mudd's post over 4 years

I'm not sure how to incorporate your changes into my orbit HTML code, this is what mine looks like
HTML
<div class="row fullwidth" id="hero-images">
<div class="large-12 columns fullwidth" id="hero-orbit">
<ul class="example-orbit-content" data-orbit>
<li data-orbit-slide="image-1">
<div>
<img src="img/hero-sausages.png">
</div>
</li>
<li data-orbit-slide="image-2">
<div>
<img src="img/hero-sausages.png">
</div>
</li>
<li data-orbit-slide="image-3">
<div>
<img src="img/hero-sausages.png">
</div>
</li>
<li data-orbit-slide="image-4">
<div>
<img src="img/hero-sausages.png">
</div>
</li>
</ul>
</div>
</div>

You commented on Taylor Mudd's post over 4 years

Could one of you guys possibly give a live example of how to do this? I have had countless attempts at this over the past few days and I can't seem to get any closer... Would really appreciate any assistance..

You commented on Taylor Mudd's post over 4 years

Yeah, sorry I should have specified but yes I'm going for the effect @dims posted above, Anyone know if there is a blanket class I can affect which will affect the top bar entirely? other than having to change every scenario of the top-bar class...

Posts Followed

Following

  • No Content

Followers

  • No Content