Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.
Initial Email From: Becky
Initial Email Subject: adding drop down menu to website
Support Case Month: March 2012
Kostas,
Is there at all another way to link the menu to our website? I believe I am having the layout issue I mentioned in my previous email because our Navigation bar is located in the site design section. Then each page (i.e. index, Locations, etc.) has its own coding. So in theory since I had to add a body and head tag to the design section of the site..there could be (and is on our index.html) a second head and body tag within in that specific page’s coding.
Any thoughts?
Becky
Reply From: Likno Customer Support
Hello Becky,
You should not have the menu-linking code on the "site design" section (page?) if this is actually a PART of the actual pages (i.e. index, Locations, etc.). You only need to have it at those actual pages, otherwise the menu-linking code will be duplicated inside the actual page and this will cause problems.
The problem you experience with the width is not related to the Linking Code position in any way. Don’t you see the same problem in the application preview?
If the menu appears fine in the preview, but not on your page, then the most likely cause is that you have some CSS that is affecting the menu. In this case I will need you to send me:
1) the Menu Project (using “File -> Export -> To ZIP”)
2) any CSS files that are attached to your page.
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Reply From: Becky
Kostas,
Thanks that did the trick! Did you have any thoughts on to if it’s possible to change the color of the Sub Menu Headers when they are links? They are showing up blue and purple (depending on if they have been visited) and are hard to read on the black background.
Cheers,
Becky
Reply From: Likno Customer Support
Got it! The problem was caused by one of the CSS which affected the font size of your HTML menu items hence making your whole menu larger.
Specifically, the problem originates from the following rules in “slider/css/style.css”:
/* TYPOGRAPHY */
ul { list-style: square inside; }
a, a:visited {
color: #ffffff;
text-decoration:underline;
font-weight:bold;
}
a:hover, a:active { color: white; }
blockquote {
padding: 0 20px;
margin-left: 20px;
border-left: 20px solid #ccc;
}
These rules affect ALL <a> tags in your page (which is a tragic thing to do in a script!) including those of the menu. Please remove these rules to fix any problems.
I suggest that you also notify the slider guys to correct this or ask for an updated version of their slider if they already have done this.
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Reply From: Becky
Do I have to remove them? Or could I just rename them? Because I don’t want to mess up the slider.
Becky
Reply From: Likno Customer Support
You can change them to the following to make sure that they apply only within the slider:
/* TYPOGRAPHY */
ul { list-style: square inside; }
#page-wrap a, #page-wrap a:visited {
color: #ffffff;
text-decoration:underline;
font-weight:bold;
}
#page-wrap a:hover, #page-wrap a:active { color: white; }
blockquote
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Reply From: Becky
I did this and it is still having a problem with the first drop down menu. It also caused the bottom of the slider to get increase in size so it no longer lines up with the bottom of the second box on the left hand column.
Becky
Reply From: Likno Customer Support
I checked your page again, and the only problem I see is that the slider thumbnails are showing over the submenus.
This is again because of an extreme CSS on their side (style.css again), and you can correct it by changing these two z-index values from 9999 to 999:
.photo-meta-data {
background: url(/slider/transpBlack.png);
padding: 10px;
height: 20px;
margin-top: -40px;
position: relative;
z-index: 9999;
color: white;
}
.photo-meta-data span { font-size: 12px; }
.cross-link {
display: block;
width: 62px;
margin-top: -22px;
position: relative;
padding-top: 3px;
z-index: 9999;
}
The height of the submenu is bigger than the others because it has more items. It is bigger in the AllWebMenus preview too.
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Reply From: Becky
Kostas,
That worked. However the navigation bar is still not loading the entire width on the home page, there is an orange line (see now.png and anyotherPage.png). Also on the now.png you’ll see a yellow line, that is where the slider is now lining up after our changes..and on before.png…(my old screen shot) you’ll see where the slider was lining up previously before we made any changes.
Thanks for all your help.
Becky.
Reply From: Likno Customer Support
Dear Becky,
I see that you are positioning the menu according to the “nav” element. Is it possible that this changes from page to page?
Why don’t you use “ctl00_bodyContent” instead? This seems to be the actual element your menu should be relative to.
Please try something like the following to see if it works in all cases:
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
