Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Konstantin Nikkari
5,185 PointsWordPress Canvas theme. Main navigation - Floar right
Guys!
Could you please help me with these two issues?
The site is http://www.apc.fi/sivudata/
1) I have menu with five buttons. They are in this order (also see attched file):
Autopecu-center Palvelut Kauppa Tietoa pesusta Yhteystiedot
I have modified the css of the menu like this:
/**********************
NAVIGATION
**********************/
/* Media Queries
=====================*/
@media only screen and (min-width: 768px) {
#navigation {
position: absolute;
height: 100px;
min-height: 0%;
padding-right: 50px;
}
ul.fl {
float: none;
}
ul#main-nav {
margin: 10px 48px 0 25px !important;
}
ul#main-nav li {
float: right;
}
.side-nav {
width: 48px !important;
}
}
Why the menu structure is upside down? It starts from ‘Yhteystiedot’ and ends in 'Autopesu-Center’? It should be (from left to right) Autopesu-Center, Palvelut, Kauppa, Tietoa Pesusta, Yhteystiedot.
2) Is there a way to raise the logo above the menu bar? Menu bar is positioned with “absolute” command and now it is blocking the logo.
Thanks!
2 Answers
Greg Kaleka
39,021 PointsHi Konstantin,
For your menu, the problem is that you are floating your list items right, rather than the list itself. Therefore as each list item is added, top to bottom, it is put as far to the right as possible, beginning with the first one. That stacks them in the opposite order. Instead, what you should do is float the ul element right, and leave the li elements alone, or set float: none;.
For the logo, I'm not sure what you mean - I see the logo just fine, unless there's another you're talking about. If you have an element that is hidden behind something else, you can set a z-index rule. Checkout this post on CSS-Tricks for info on how to use it.
Hope this helps!
-Greg
Colin Marshall
32,861 PointsTo fix the reverse order issue you need to float the ul#main-nav container to the right, and float: none for the li items. Once you do that you can move the logo up by changing the #logo div's padding-top property.
Konstantin Nikkari
5,185 PointsThanks. Float right for the ul#main-nav works. But li items should be left without float property or you would get this: https://zonercloud.fi/public.php?service=files&t=a4b808af4bc44218e887dfec61156b2f
I don't understand how can changing the padding-top property effects the stacking order? Padding-top only pushes the logo down.
Colin Marshall
32,861 PointsYou are correct that you need the float: left on the li items. My bad.
Regarding the logo, there is no stacking order conflict now that the ul is floated to the right. The logo and the nav don't overlap each other anymore. I should have said "reduce the padding-top property" on #logo to move it up on the page, but maybe that's not what you meant.
Colin Marshall
32,861 PointsOk I see what you are talking about with the logo now. Disregard my last comment on that.
Konstantin Nikkari
5,185 PointsKonstantin Nikkari
5,185 PointsThanks! Float right for the ul#main-nav works. But li items should be left without float property or you would get this: https://zonercloud.fi/public.php?service=files&t=a4b808af4bc44218e887dfec61156b2f
There is only one logo and it is the one that we see (the whale). Problem here is that main-nav is positioned as absolute and the navigation div now covers logo's div so that you can't click the logo and get yourself to the home page (as very normally users do when they want to get to the home page). Changing the z-index doesn't seem to effect as the navigation and logo are in completely different divs.
Please see this img https://zonercloud.fi/public.php?service=files&t=11ce55209f56b3d07cd0fc93ab47b6ad