Menu icon Foundation
Problem adding image to top bar

I'm trying to create a top bar with an image in it that scales with the browser.

[See first image]
I've put borders around the two parts to help identify them.
The red border is around my logo that I want to scale with the browser window.
The black border is around the top bar.

When I shrink my browser the menu seems to toggle itself (which happens at 640 pixels wide) . [See second image]

<div class="row">
        <div class="large-12 columns main" style="background-color: #5c4838;">
            <div class="" style="width: 30%; float: left; border: 1px solid red;">
                <img src="Content/Images/test_logo.png"/>
            </div>
            
            <div class="contain-to-grid" style="border: 1px solid black; float: left; width: 70%;">
                <nav class="top-bar" data-topbar>
                    <ul class="title-area">
                        <li class="name">
                            <span class="exceptional hide-for-medium-down">Providing Exceptional Apartment Living For Over Fifty Years</span>
                        </li>
                        <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
                    </ul>

                    <section class="top-bar-section">
                        <ul class="right" style="float: right;">
                            <li class=""><a class="fl" href="#">Careers</a></li>
                            <li><a class="fl menuicon" href="#"><img src="/Content/Images/icon_facebooks.png" /></a></li>
                            <li><a class="fl menuicon" href="#"><img src="/Content/Images/icon_youtubes.png" /></a></li>
                        </ul>
                    </section>
                </nav>
            </div>
            
        </div>
        
        <div class="large-12 columns green"></div>
    </div>
            

         

Menu01

Menu02

html, body {
    .main,
	.green {
		border-left: 1px solid $menu_color;
		border-right: 1px solid $menu_color;
	}

	.top-bar {
		overflow: visible !important;
		height: 100%;
	}

	.green {
		background-color: #7fb23f;
		height: 5px;
	}

	.main {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.iconyoutubeS {
		display: block;
		border-left: 1px solid black;
		border-right: 1px solid black;
		background: Transparent url(../Content/Images/icon_youtubes.png) 0 0 no-repeat;
	}

	.image_rotator {
		display: block;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.exceptional {
		font-family: $exceptional_font;
		width: 430px;
		font-size: 1.2em;
		position: absolute;
		bottom: 15px;
		color: #ffffff;
		margin: 0;
	}
}

top bartoggleimage

I'm trying to create a top bar with an image in it that scales with the browser.

[See first image]
I've put borders around the two parts to help identify them.
The red border is around my logo that I want to scale with the browser window.
The black border is around the top bar.

When I shrink my browser the menu seems to toggle itself (which happens at 640 pixels wide) . [See second image]

<div class="row">
        <div class="large-12 columns main" style="background-color: #5c4838;">
            <div class="" style="width: 30%; float: left; border: 1px solid red;">
                <img src="Content/Images/test_logo.png"/>
            </div>
            
            <div class="contain-to-grid" style="border: 1px solid black; float: left; width: 70%;">
                <nav class="top-bar" data-topbar>
                    <ul class="title-area">
                        <li class="name">
                            <span class="exceptional hide-for-medium-down">Providing Exceptional Apartment Living For Over Fifty Years</span>
                        </li>
                        <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
                    </ul>

                    <section class="top-bar-section">
                        <ul class="right" style="float: right;">
                            <li class=""><a class="fl" href="#">Careers</a></li>
                            <li><a class="fl menuicon" href="#"><img src="/Content/Images/icon_facebooks.png" /></a></li>
                            <li><a class="fl menuicon" href="#"><img src="/Content/Images/icon_youtubes.png" /></a></li>
                        </ul>
                    </section>
                </nav>
            </div>
            
        </div>
        
        <div class="large-12 columns green"></div>
    </div>
            

         

Menu01

Menu02

html, body {
    .main,
	.green {
		border-left: 1px solid $menu_color;
		border-right: 1px solid $menu_color;
	}

	.top-bar {
		overflow: visible !important;
		height: 100%;
	}

	.green {
		background-color: #7fb23f;
		height: 5px;
	}

	.main {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.iconyoutubeS {
		display: block;
		border-left: 1px solid black;
		border-right: 1px solid black;
		background: Transparent url(../Content/Images/icon_youtubes.png) 0 0 no-repeat;
	}

	.image_rotator {
		display: block;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.exceptional {
		font-family: $exceptional_font;
		width: 430px;
		font-size: 1.2em;
		position: absolute;
		bottom: 15px;
		color: #ffffff;
		margin: 0;
	}
}

This post has been closed. No new replies can be added.

James Gehring over 5 years ago

Try this and adjust your top bar height in css to fit the logo. you might have to tweak your css a bit.

<div class="contain-to-grid green"> 
    <nav class="top-bar" data-topbar> 
        <ul class="title-area"> 
            <li class="name"> 
                <h1><a href="#"><img src="Content/Images/test_logo.png"/></a></h1> 
            </li> 
            <li class="toggle-topbar menu-icon">
                <a href="#">Menu</a>
            </li> 
        </ul> 
        <section class="top-bar-section"> 
            <!-- Right Nav Section --> 
            <ul class="right"> 
            <li>
                <span class="exceptional hide-for-medium-down">Providing Exceptional Apartment Living For Over Fifty Years</span>
            </li> 
                <li> 
                    <a href="">Careers</a>
                </li>
                <li>
                    <a class="fl menuicon" href="#"><img src="/Content/Images/icon_facebooks.png" /></a>
                </li>
                <li>
                    <a class="fl menuicon" href="#"><img src="/Content/Images/icon_youtubes.png" /></a>
                </li>
            </ul> 

        </section> 
    </nav> 
    </div>

Then to make that green line you would make the css

.green{border-bottom:5px solid #7fb23f;}

Eric over 5 years ago

When I shrink the screen the menu is expanded and the menu button doesn't work.

James Gehring over 5 years ago

Do you have a live link to the site I could look at? It is probably a CSS issue, but I would need to see it in action to tell you. What version of Foundation are you using?

Eric over 5 years ago

I'll put together a public testing site and will follow up with a link.

Eric over 5 years ago

I got this working finally.

The problem was the order in which I was calling Foundation's elements.

Gani Utomo over 5 years ago

Hi Eric,

How do you solved your problem?

Could you share your solution?

Alan Ashbaugh about 5 years ago

Eric, can you please share your solution?

Iago about 5 years ago

He said he had a problem with the order of the elements.
I have done it using this, works if you want the icon on the left side.

<nav class="top-bar">
    <ul class="title-area">
        <li class="name">
            <a href="#">
                <img src="#" />
            </a>
        </li>

Rafi Benkual over 4 years ago