Issue with positioning the menu correctly: editing an EKM PowerShop template

Right, I think that the menu is in HTML/CSS and not javascript from doing some colour change experiments;

Continuing the discussion from What does this JavaScript do? Trying to edit a EKMPowershop template:

So, I’m putting a new topic in the right section now.

Here are the parts which I have picked out as being related to the menu, but I will also post the whole template code as well because I’m sure I’ll be completely wrong!

main-menu {clear: both; background-color:[ekm:colour_5][/ekm:colour_5];}
#navigation {width: 100%;}
#navigation ul {list-style: none; margin: 0px; padding: 0px;}
#navigation li {float: left;}
#navigation li a {padding: 10px; color: [ekm:colour_6][/ekm:colour_6]; font-family: "Open Sans", sans-serif; font-size: 16px; text-decoration: none; display: block; margin: 0;}
#navigation li:first-child a {padding-left: 10px;}
#navigation li a:hover, #navigation li:hover {color:[ekm:colour_8][/ekm:colour_8]; background-color: [ekm:colour_7][/ekm:colour_7]; text-decoration: none;}
#navigation li:hover {border: none;}
#navigation li:hover > a {color: [ekm:colour_8][/ekm:colour_8]; display: block; background-color: [ekm:colour_7][/ekm:colour_7] }
#navigation li ul {position: absolute; display: none; width: 200px; z-index: 5000; margin: 0 0 0 0; padding: 0; background-color:[ekm:colour_7][/ekm:colour_7];}
#navigation li ul li {float: none; font-size: 18px; padding: 0;}
#navigation li ul li:hover {padding: 0;}
#navigation li ul li a {color: [ekm:colour_8][/ekm:colour_8]; font-size: 13px; padding: 8px 10px;}
#navigation li ul li a:hover {background: [ekm:colour_5][/ekm:colour_5]; color: [ekm:colour_6][/ekm:colour_6]; border: none;}
[ekm:showdata]
font_formatting='no';
' Data to Show
data='categories';
location='0';
' Basic Layout & Navigation
cols='99';
rows='99';
page_navigation='auto';
' Advanced Data Manipulation
orderby='orderlocation, name';
skiprecords='0';
excludelist='';
includelist='';
' Navigation Options when logged in
editbuttons='YES';
counterreset='';
' Output Format
output_start='<div id="navigation" class="cf"><ul>';
output_row_start='';
output_column_start='';
output_item='<li>[name]

[ekm:nested_showdata]
data="categories";
location="[id]";
cols="99";
rows="500";
page_navigation="no";
orderby="orderlocation, name";
font_formatting="No";
output_start=" <ul>";
output_row_start="";
output_column_start="";
output_item="<li>[nested_name-NOEDIT]</li>";
output_column_end="";
output_row_end="";
output_end="</ul>";
element_replace="null";
[/ekm:nested_showdata]

</li>';
output_column_end='';
output_row_end='';
output_end='</ul></div><!--CLOSE NAVIGATION -->';
'Element Replace
element_replace='null';
[/ekm:showdata]

</div><!--MAIN-MENU-->
</div><!---wrapper-->
</div><!--header-bottom-bg-->

And here is the full page code on pastie: http://pastie.org/10109274

And this is the part I need. I turned it a garish pink to identify what part I was looking for!
Basically, I’m looking to add a top menu on to another template that doesn’t have one

and I want to put in on this template just above the banner:

They offer the service to add it but it costs £200!! :frowning:

I added both the navigation css and the < div > part that said menu inside it and that works!

But… the menu is very high above the page. How to I get it into the right place? I think this would require some position stuff, but i’m not sure where to put it, ect.

I want to move it just above the catwalk collection banner.

I tried editing this bit by changing position tag…

#navigation li ul {position: absolute; display: none; width: 200px; z-index: 5000; margin: 0 0 0 0; padding: 0; background-color:[ekm:colour_7][/ekm:colour_7];}

…and this happened:

and I realised I probably would need to add something to the menu bit at first, so I tried this:

.main-menu {clear: both; background-color:[ekm:colour_5][/ekm:colour_5];}
#navigation {****position: relative; top: 300px;**** width: 100%;}

adding the position relative bit, which does indeed move it, but it leaves a white space behind

Does someone have a better way of moving this to the right place? and knows which bits I would need to add it to?

Thanks :smile:

I suggest that you stop trying to rip them off. If you don’t like the price then looking elsewhere is a viable strategy.

Having got that off my chest though, all the best with editing your menu.

I was under the impression that that cost was disproportional to the work involved, but it seems I am completely wrong on that front. Is that figure representative for that work?

I do have an interest in this area as many job postings I would like to apply for also ask for knowledge of HTML & CSS and I’m trying to learn as much as I can at the moment, but I completely see how that comes across for people already doing this work for a living.

I have no information as of yet on who they are or what they provide. As it seems that you’re paying for them to not only do the work now, but for the work that they’ve put in to developing and supporting it, it doesn’t seem to be all that unreasonable.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.