homepage Welcome to WebmasterWorld Guest from 54.197.111.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
show menu at top
minion




msg:4602941
 8:15 am on Aug 18, 2013 (gmt 0)

hi guys, how do i edit this css to show menu fixed at top of page:

.header {
background:#'.returnOptionValue('header_background _color').';
background:rgba('.implode(',',hex2rgb(returnOption Value('header_background_color'))).','.returnOptio nValue('header_background_opacity').');
}

.header .inner .menu ul li a {
color:#'.returnOptionValue('menu_link_color').';
}

.header .inner .menu ul li a:hover {
color:#'.returnOptionValue('menu_link_hover_color' ).';
}

.header .inner .menu ul li.current_page_item a, .header .inner .menu ul li.current-menu-item a {
background:#'.returnOptionValue('active_menu_backg round_color').';
color:#'.returnOptionValue('active_menu_link_color ').';

 

lucy24




msg:4602951
 10:05 am on Aug 18, 2013 (gmt 0)

All of that CSS is meaningless without the HTML it belongs to. Crystal ball says that this code was borrowed from someone else and you don't need three-quarters of it. Crystal ball further says that you don't understand three-quarters of it. And at first glance it's really horribly complicated CSS if you're not 100% sure what you're doing.

Most dramatically there's
.header .inner .menu ul li.current_page_item a
which means:

this style applies to
links
located within list items of class "current_page_item"
when these in turn are inside any unordered list
which in turn is inside any element of class "menu"
which in turn is inside any element of class "inner"
which, finally, is inside any element of class "header".

not to be confused with

links
located within list items of some other class (or no named class at all)
when these in turn are inside any unordered list
which in turn is inside any element of class "menu"
which in turn is inside any element of class "inner"
which, finally, is inside any element of class "header".

or

links
located within list items of class "current_page_item"
when these in turn are inside any ordered list
which in turn is inside any element of class "menu"
which in turn is inside any element of class "inner"
which, finally, is inside any element of class "header".

or

links
located within list items of class "current_page_item"
when these in turn are inside any unordered list
which in turn is not inside an element of class "menu"
which in turn is inside any element of class "inner"
which, finally, is inside any element of class "header".

or

... et cetera. I sincerely don't believe the page is that dense, so the user's browser is going through a ### of a lot of extra work.


I said "at first glance". Take a closer look and, as far as I can make out, every bit of that CSS only applies to colors of text and/or background. So it isn't even relevant to the question.

Generic answer: Don't start with the code. Start by figuring out, in English, what you want each element to do and what you want the whole page to look like. Once you've got a clear picture, you can work out the code.

menu fixed at top of page

When you say "page" do you mean viewport? You don't need to include any special CSS to keep things at the top of the whole page; just put it first in the HTML and it will display at the top by default.

Or do you mean that you want some element to stay at the top of the visible window even if the user scrolls down through the rest of the content? Like* the blue strip that's always in the same place here [w3.org]?


* Yes, OK, not exactly like. That one's "background-attachment", while here we're probably dealing with a vanilla "position".

JD_Toims




msg:4603129
 1:30 am on Aug 19, 2013 (gmt 0)

What Lucy24 said, plus:

All the css you provided deals with colors. To do what it sounds like you're wanting you'll need to use position:fixed;

One thing to keep in mind on this is to center the menu on the page you'll have to set the position as left:50%; margin-left:-[1/2 of the menu width here].

EG
If the menu is 750px wide by 40px high this will center it and "stick" it to the top of the page.

.the_menu_class_name {
position:fixed;
width:750px;
height:40px;
top:0;
left:50%;
margin:0 0 0 -375px;
z-index:2;
}

BTW: Welcome to WebmasterWorld!

minion




msg:4603144
 5:15 am on Aug 19, 2013 (gmt 0)

Yep lucy24 i have no clue whats going on here, i just want the menu to be on top. Where can I see the classes? Not sure where to start this to display this on top. On the page, if you scroll down the menu displays but I want it fixed at top without scrolling down

[edited by: DrDoc at 4:26 pm (utc) on Aug 19, 2013]
[edit reason] Removed link [/edit]

lucy24




msg:4603150
 5:36 am on Aug 19, 2013 (gmt 0)

The magic word is "fixed". But really, you've got to spend a little time playing around with CSS so you have a general idea how stylesheets interact with HTML. You can't just paste in someone's code and take it on faith. It may not be as potentially disastrous as cutting-and-pasting in an htaccess file, but it still leaves you pretty helpless.

Crudest form:
"class = 'suchandsuch'" in html
corresponds to
.suchandsuch in css

css:
.myclass {color: red; background-color: black;}

html:
<p class = "myclass">blahblah</p>
<p><span class = "myclass">moreblahblah</span></p>

visible result: The text "blahblah" is red against a black background that runs across the page from left to right. The text "moreblahblah" is red against a black background that takes up only as much space as the text itself.

birdbrain




msg:4603201
 9:07 am on Aug 19, 2013 (gmt 0)

Hi there minion,

and a warm welcome to these forums. ;)

Let's stop all the waffle and cut to the chase. :)

Find this code in your HTML..


<!--start header-->
<div class="header header-main">



...and change it to this...


<!--start header-->
<div class="header">



Job done. ;)


birdbrain

minion




msg:4603202
 9:12 am on Aug 19, 2013 (gmt 0)

Thanks for the warm welcome Birdbrain.

Cut to the chase is my type of thing. Thank you, will try and find that and get back to you.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved