Menu icon Foundation

My Posts

  • 3
    Replies
  • topbar changes style on scroll

    By bratt

    topbar

    hi i getting messed up with top-bar and sticky sub bar(work like tabs) 1. i would like to lean how to make top-bar fixed but changes the styles(color, padding logo changes etc..) 2. i would like to lean how to make sub nav stays in middle of scr... (continued)

    Last Reply by bratt over 4 years ago







My Comments

bratt commented on bratt's post over 4 years

Thank you for you guys, it is very helpful.

how do i change the style like starwars site?
i mean the topbar size, color, visible logos, etc..
like whole different topbar..

and with sticky bar middle of screen, how do i change it to full width? and want the lists to be evenly within contents width?

i hope you will understand what i mean..

bratt commented on bratt's post over 4 years

there is some mistake during the post this sorry about this i cannot find edit or delete this..
anyway here is my code.

$primary-color: #ef4523;

/*
HEADER SECTION
========================================================================== */
.header-section {
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
position: fixed;
z-index: 999;
min-width: 100%;
}

.contain-to-grid {
background-color: rgba(255, 255, 255, 0.97);
}

// FILL USED FOR HEADER
.header-fill {
background: #fff;
height: 135px;
.tablet-mobile-logo img {
padding-top: 30px;
}
}

// USED FOR JQUERY ACTION
.padding-on-my-header {
padding: 17px 0.9375rem 62px 0.9375rem;
ul.title-area img {
margin: -5px 0 0 0;
}
}

.full-width {
min-width: 100%;
}

p {
line-height: 3rem;
padding-bottom: 30px;
}

/*
CONTENT SECTION
========================================================================== */

.content-section {
.main-content {
margin-top: 35px;
}
}

/*
FOOTER SECTION
========================================================================== */

.footer-section {
background: #333;
min-height: 100px;
p {
color: #fff;
margin-top: 50px;
}
}
/*
TOPBAR NAVGATION
========================================================================== */
.top-bar
{
background: none;
padding: 45px 0.9375rem 90px 0.9375rem;
transition: all 0.5s ease 0.1s;
// LOGO ADJUSTMENT
ul.title-area img {
margin: -10px 0 0 0;
}
.top-bar-section ul {
background: none;
// MENU ITEM STYLES
li a:not(.button), li.active a:not(.button) {
background: none;
line-height: 30px;
font-size: 12px;
padding: 0;
margin: 5px 0 0 0;
text-transform: uppercase;
}
// MENU ITEM HOVERS
li a:not(.button):hover {
background: none;
border-bottom: 2px solid $primary-color;
color: #222;
}
// MENU ITEM ACTIVE
li.active a:not(.button) {
border-bottom: 2px solid $primary-color;
color: #222;
&:hover {
background: none;
}
}
li {
margin-left: 30px;
a {
color: #888;
}
}
}
// DROPDOWN MENU
.top-bar-section ul li:hover:not(.has-form) > a {
color: #333;
}
.top-bar-section li ul.dropdown {
background: #fff;
border: 1px solid #ddd;
color: #888;
li {
border-bottom: 1px solid #ddd;
margin: 0;
padding: 5px 15px 5px 15px;
}
}
.top-bar-section li ul.dropdown li a:not(.button):hover, .top-bar-section li ul.dropdown li a:not(.button) {
background: none;
color: #222;
border-bottom: none;
padding: 20px -4px 40px 45px;
}
.top-bar-section ul.dropdown li:hover:not(.has-form) > a:not(.button) {
background: none;
color: #222;
}
// DROPDOWN ARROW
.has-dropdown > a:after {
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
margin-top: -5px;
}
}

@media only screen and (max-width: 1024px) {

.top-bar {
    margin-top: 0;
    padding: 0;
    float: none;
    // MENU BUTTON AND HAMBURGER ICON
    .toggle-topbar.menu-icon a {
        color: #222;
        &:after {
            box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222;
        }
    }
    // LOGO
    ul.title-area img {
        margin: -2px 0 0;
        width: 145px;
    }
    .top-bar-section {
        ul {
            background: #333;
            li {
                margin-left: 0;
            }
            li > a {
                background: $primary-color;
                border-radius: 0;
                font-size: 0.9rem;
            }
            // NORMAL BUTTONS
            li:not(.has-form) a:not(.button) {
                background: none;
                color: #fff;
                padding: 10px 15px;
                margin-top: 0;
                &:hover {
                    background: $primary-color;
                    color: #fff;
                    margin-top: 0;
                }
            }
            // ACTIVE BUTTON
            li.active:not(.has-form) a:not(.button) {
                background: $primary-color;
                color: #fff;
                padding: 10px 15px;
                margin-top: 0;
                &:hover {
                    background: lighten($primary-color, 5%);
                    margin-top: 0;
                }
            }
        }
    }
}
// SMALLER IMAGE
.top-bar.padding-on-my-header ul.title-area img {
    margin: 5px 13px 0;
    width: 35px;
}
// EXPANDED TOPBAR MENU
.top-bar.expanded {
    margin-top: 0;
    padding: 0;
    float: none;
    .toggle-topbar.menu-icon a {
        color: #fff;
        &:after {
            box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
        }
    }
}

// SMALLER HEADER
.header-fill {
    height: 40px;
}

}

<!doctype html>




Foundation





<!-- HEADER SECTION -->

<!-- TOPBAR SECTION -->

    <!-- TITLE AREA & LOGO -->
    <ul class="title-area">
      <li class="name">
        <img src="img/Acme_Monogram_Colour.png" alt="" id="logo-image"> PARK
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul> <!-- END TITLE AREA & LOGO -->

    <!-- MENU ITEMS -->
    <section class="top-bar-section">
      <ul class="right">  
        <li class="active"><a href="#">Home</a></li>
        <li class="has-dropdown">
          <a href="#">Stickers</a>
          <ul class="dropdown">
            <li class="has-dropdown "><a href="#">Paper stickers</a>
                <ul class="dropdown">
                    <li><a href="#">Gloss paper sticker</a></li>
                    <li><a href="#">Semi gloss paper sticker</a></li>
                    <li><a href="#">Bond paper sticker</a></li>
                    <li><a href="#">Craft paper sticker</a></li>
                </ul>  
            </li>
            <li class="has-dropdown"><a href="#">Vinyl stickers</a>
              <ul class="dropdown">
                    <li><a href="#">Matt vinyl sticker</a></li>
                    <li><a href="#">gloss vinyl sticker</a></li>
                    <li><a href="#">Silver vniyl sticker</a></li>
                    <li><a href="#">PVC sticker</a></li>
                </ul>  
            </li>
            <li class="has-dropdown"><a href="#">Clear vinyl stickers</a>
              <ul class="dropdown">
                    <li><a href="#">Full color clear vinyl sticker</a></li>
                    <li><a href="#">Silk screen clear vinly sticker</a></li>
                </ul>  
            </li>
            <li class="has-dropdown"><a href="#">Metallic stickers</a>
               <ul class="dropdown">
                  <li><a href="#">Gold/Silver paper foiled sticker</a></li>
                  <li><a href="#">Gold/Silver vinyl sticker</a></li>
                  <li><a href="#">Alumimun sticker</a></li>
                  <li><a href="#">Metal sticker</a></li>   
               </ul>  
            </li> 
            <li class="has-dropdown"><a href="#">Hologram stickers</a>
               <ul class="dropdown">
                  <li><a href="#">Hologram sticker - Solid color</a></li>
                  <li><a href="#">Hologram sticker - Full color</a></li>
                  <li><a href="#">3D Hologram sticker</a></li>
                  <li><a href="#">Hologram void sticker</a></li>   
               </ul>  
            </li> 
            <li class="has-dropdown"><a href="#">Dome stickers</a>
               <ul class="dropdown">
                  <li><a href="#">Dome sticker - Solid color</a></li>
                  <li><a href="#">Dome sticker - Full color</a></li>
                  <li><a href="#">Alumimun epoxy sticker</a></li>
               </ul>  
            </li>
            <li class="has-dropdown"><a href="#">Warrany stickers</a>
               <ul class="dropdown">
                  <li><a href="#">Void sticker</a></li>
                  <li><a href="#">Warranty(dot) sticker</a></li>
               </ul>  
            </li>
            <li><a href="#">Double/reverse sticker</a></li>  
          </ul>
        </li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Quality</a></li>
        <li><a href="#">Artwork set-up</a></li>  
        <li><a href="#">QnA</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Blog</a></li>  

      </ul>
    </section> <!-- END MENU ITEMS -->
  </nav> <!-- END TOPBAR SECTION -->
</div> <!-- END HEADER SECTION

<!-- CONTENT FILL WHEN SCROLL = 0 -->
<div class="header-fill"></div>

bratt commented on bratt's post over 4 years

hi ..

very much apreciate with your kindly responses, and few more questions..

so if i would want to use your provided codes, do i need to copy and paste?

and do i better change the original sass codes on your css comments? or better make new sass file such as custom.scss?

one more question for side bar.. menu i would like the side bar like fixed on top and expend height when sub menu shows, like dropdown..

please see here..

http://wrapbootstrap.com/preview/WB0B30DGR

if you let me know how to also make blockquote? like this sidebar?

Posts Followed

No Content

Following

    No Content

Followers

My Posts




My Comments

You commented on bratt's post over 4 years

Thank you for you guys, it is very helpful.

how do i change the style like starwars site?
i mean the topbar size, color, visible logos, etc..
like whole different topbar..

and with sticky bar middle of screen, how do i change it to full width? and want the lists to be evenly within contents width?

i hope you will understand what i mean..

You commented on bratt's post over 4 years

there is some mistake during the post this sorry about this i cannot find edit or delete this..
anyway here is my code.

$primary-color: #ef4523;

/*
HEADER SECTION
========================================================================== */
.header-section {
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
position: fixed;
z-index: 999;
min-width: 100%;
}

.contain-to-grid {
background-color: rgba(255, 255, 255, 0.97);
}

// FILL USED FOR HEADER
.header-fill {
background: #fff;
height: 135px;
.tablet-mobile-logo img {
padding-top: 30px;
}
}

// USED FOR JQUERY ACTION
.padding-on-my-header {
padding: 17px 0.9375rem 62px 0.9375rem;
ul.title-area img {
margin: -5px 0 0 0;
}
}

.full-width {
min-width: 100%;
}

p {
line-height: 3rem;
padding-bottom: 30px;
}

/*
CONTENT SECTION
========================================================================== */

.content-section {
.main-content {
margin-top: 35px;
}
}

/*
FOOTER SECTION
========================================================================== */

.footer-section {
background: #333;
min-height: 100px;
p {
color: #fff;
margin-top: 50px;
}
}
/*
TOPBAR NAVGATION
========================================================================== */
.top-bar
{
background: none;
padding: 45px 0.9375rem 90px 0.9375rem;
transition: all 0.5s ease 0.1s;
// LOGO ADJUSTMENT
ul.title-area img {
margin: -10px 0 0 0;
}
.top-bar-section ul {
background: none;
// MENU ITEM STYLES
li a:not(.button), li.active a:not(.button) {
background: none;
line-height: 30px;
font-size: 12px;
padding: 0;
margin: 5px 0 0 0;
text-transform: uppercase;
}
// MENU ITEM HOVERS
li a:not(.button):hover {
background: none;
border-bottom: 2px solid $primary-color;
color: #222;
}
// MENU ITEM ACTIVE
li.active a:not(.button) {
border-bottom: 2px solid $primary-color;
color: #222;
&:hover {
background: none;
}
}
li {
margin-left: 30px;
a {
color: #888;
}
}
}
// DROPDOWN MENU
.top-bar-section ul li:hover:not(.has-form) > a {
color: #333;
}
.top-bar-section li ul.dropdown {
background: #fff;
border: 1px solid #ddd;
color: #888;
li {
border-bottom: 1px solid #ddd;
margin: 0;
padding: 5px 15px 5px 15px;
}
}
.top-bar-section li ul.dropdown li a:not(.button):hover, .top-bar-section li ul.dropdown li a:not(.button) {
background: none;
color: #222;
border-bottom: none;
padding: 20px -4px 40px 45px;
}
.top-bar-section ul.dropdown li:hover:not(.has-form) > a:not(.button) {
background: none;
color: #222;
}
// DROPDOWN ARROW
.has-dropdown > a:after {
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
margin-top: -5px;
}
}

@media only screen and (max-width: 1024px) {

.top-bar {
    margin-top: 0;
    padding: 0;
    float: none;
    // MENU BUTTON AND HAMBURGER ICON
    .toggle-topbar.menu-icon a {
        color: #222;
        &:after {
            box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222;
        }
    }
    // LOGO
    ul.title-area img {
        margin: -2px 0 0;
        width: 145px;
    }
    .top-bar-section {
        ul {
            background: #333;
            li {
                margin-left: 0;
            }
            li > a {
                background: $primary-color;
                border-radius: 0;
                font-size: 0.9rem;
            }
            // NORMAL BUTTONS
            li:not(.has-form) a:not(.button) {
                background: none;
                color: #fff;
                padding: 10px 15px;
                margin-top: 0;
                &:hover {
                    background: $primary-color;
                    color: #fff;
                    margin-top: 0;
                }
            }
            // ACTIVE BUTTON
            li.active:not(.has-form) a:not(.button) {
                background: $primary-color;
                color: #fff;
                padding: 10px 15px;
                margin-top: 0;
                &:hover {
                    background: lighten($primary-color, 5%);
                    margin-top: 0;
                }
            }
        }
    }
}
// SMALLER IMAGE
.top-bar.padding-on-my-header ul.title-area img {
    margin: 5px 13px 0;
    width: 35px;
}
// EXPANDED TOPBAR MENU
.top-bar.expanded {
    margin-top: 0;
    padding: 0;
    float: none;
    .toggle-topbar.menu-icon a {
        color: #fff;
        &:after {
            box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
        }
    }
}

// SMALLER HEADER
.header-fill {
    height: 40px;
}

}

<!doctype html>




Foundation





<!-- HEADER SECTION -->

<!-- TOPBAR SECTION -->

    <!-- TITLE AREA & LOGO -->
    <ul class="title-area">
      <li class="name">
        <img src="img/Acme_Monogram_Colour.png" alt="" id="logo-image"> PARK
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul> <!-- END TITLE AREA & LOGO -->

    <!-- MENU ITEMS -->
    <section class="top-bar-section">
      <ul class="right">  
        <li class="active"><a href="#">Home</a></li>
        <li class="has-dropdown">
          <a href="#">Stickers</a>
          <ul class="dropdown">
            <li class="has-dropdown "><a href="#">Paper stickers</a>
                <ul class="dropdown">
                    <li><a href="#">Gloss paper sticker</a></li>
                    <li><a href="#">Semi gloss paper sticker</a></li>
                    <li><a href="#">Bond paper sticker</a></li>
                    <li><a href="#">Craft paper sticker</a></li>
                </ul>  
            </li>
            <li class="has-dropdown"><a href="#">Vinyl stickers</a>
              <ul class="dropdown">
                    <li><a href="#">Matt vinyl sticker</a></li>
                    <li><a href="#">gloss vinyl sticker</a></li>
                    <li><a href="#">Silver vniyl sticker</a></li>
                    <li><a href="#">PVC sticker</a></li>
                </ul>  
            </li>
            <li class="has-dropdown"><a href="#">Clear vinyl stickers</a>
              <ul class="dropdown">
                    <li><a href="#">Full color clear vinyl sticker</a></li>
                    <li><a href="#">Silk screen clear vinly sticker</a></li>
                </ul>  
            </li>
            <li class="has-dropdown"><a href="#">Metallic stickers</a>
               <ul class="dropdown">
                  <li><a href="#">Gold/Silver paper foiled sticker</a></li>
                  <li><a href="#">Gold/Silver vinyl sticker</a></li>
                  <li><a href="#">Alumimun sticker</a></li>
                  <li><a href="#">Metal sticker</a></li>   
               </ul>  
            </li> 
            <li class="has-dropdown"><a href="#">Hologram stickers</a>
               <ul class="dropdown">
                  <li><a href="#">Hologram sticker - Solid color</a></li>
                  <li><a href="#">Hologram sticker - Full color</a></li>
                  <li><a href="#">3D Hologram sticker</a></li>
                  <li><a href="#">Hologram void sticker</a></li>   
               </ul>  
            </li> 
            <li class="has-dropdown"><a href="#">Dome stickers</a>
               <ul class="dropdown">
                  <li><a href="#">Dome sticker - Solid color</a></li>
                  <li><a href="#">Dome sticker - Full color</a></li>
                  <li><a href="#">Alumimun epoxy sticker</a></li>
               </ul>  
            </li>
            <li class="has-dropdown"><a href="#">Warrany stickers</a>
               <ul class="dropdown">
                  <li><a href="#">Void sticker</a></li>
                  <li><a href="#">Warranty(dot) sticker</a></li>
               </ul>  
            </li>
            <li><a href="#">Double/reverse sticker</a></li>  
          </ul>
        </li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Quality</a></li>
        <li><a href="#">Artwork set-up</a></li>  
        <li><a href="#">QnA</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Blog</a></li>  

      </ul>
    </section> <!-- END MENU ITEMS -->
  </nav> <!-- END TOPBAR SECTION -->
</div> <!-- END HEADER SECTION

<!-- CONTENT FILL WHEN SCROLL = 0 -->
<div class="header-fill"></div>

You commented on bratt's post over 4 years

hi ..

very much apreciate with your kindly responses, and few more questions..

so if i would want to use your provided codes, do i need to copy and paste?

and do i better change the original sass codes on your css comments? or better make new sass file such as custom.scss?

one more question for side bar.. menu i would like the side bar like fixed on top and expend height when sub menu shows, like dropdown..

please see here..

http://wrapbootstrap.com/preview/WB0B30DGR

if you let me know how to also make blockquote? like this sidebar?

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content