Enfold – Responsive Slide Out Menu **ISSUE**

Nick – Just had a thought and wondered if I could kill two birds with one stone without having to go live…

If this doesnt help you then let me know and ill get the first few pages uploaded

Here’s my thoughts

I’ve attached a link to a set of images that outline three things

a) what I want to achieve overall with the nav (look n’ feel) as created in Photoshop

b) what I’ve achieved thus far (still missing the feint grey line we’ve discussed before)

c) whats going wrong in responsive mode

Here’s the link to the images I’ve grabbed:

http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c

so…….

two things:

1) Can you help me create the feint line still missing from the top of the nav (see image). Its 1 px deep and spans the width of my menu, its grey, should be responsive and allow the HIGHLIGHT BLOCK to travel along it. Obviously, I may add sections so it needs to adapt when I add or take away pages

2) Can you help me remove the superfluous thick line that appears in the slide out responsive menu. I don’t want it at all in this mode. I just want the menu to behave/look like yours in the demo.

Here’s the code I’m using to adapt the nag (as requested)

/* MENU BORDERS */

#top .main_menu .menu ul li:last-child>a {

border-bottom-style: solid;

border-bottom-color: #33302b;

border-bottom-width: 1px;

border-top-style: solid !important;

border-top-color: #33302b !important;

border-top-width: 1px !important;

}

#top .main_menu .menu ul li a {

border-right-style: solid;

border-right-color: #33302b;

border-right-width: 1px;

border-left-style: solid;

border-left-color: #33302b;

border-left-width: 1px;

}



#top .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu {

border-top-color: #423e38; !important;

border-top-style: solid;

border-top-width: 1px;

}



/* Top Menu width spacing */

#top .main_menu ul:first-child > li > a {

margin-top: 1px;

padding: 0 10px;

}



#top .container_wrap {

border-top-width: 2px;

}



/* Main Menu - ROLLOFF TEXT */

#top .header_color .main_menu ul:first-child>li>a {

padding-top: 7px !important;

color: #eee6de ;

font-size: 1.4em;

letter-spacing: 0.0em;

font-weight:400;

}



/* Main Menu - ROLLOVER TEXT */

#top .header_color .main_menu ul:first-child>li>a:hover {

color: #d83300;

font-size: 1.4em;

letter-spacing: 0.0em;

font-weight:400;

}



/* Main Menu - SUB MENU OFF */

#top .main_menu .menu ul li>a {

color: #e2e2e2;

font-size: 1.2em;

letter-spacing: 0.0em;

font-weight:400;



}



/* Main Menu - SUB MENU HOVER */

#top .main_menu .menu ul li>a:hover {

color: #e2e2e2 !important;

background-color: #d83300;

}



/* Main Menu - HIGHLIGHT BLOCK */

#top .avia-menu-fx {

display:block;

position:absolute;

top: 28px;

border-style:solid;

border-width:2px;

}



/* HEADER - BOTTOM LINE (attached to slider) */

#header_main {

border-bottom-style: solid;

border-bottom-color: #3b3330;

}

Hi Nick,

Im not working online hence me sending the clipular link:

http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c

If you dont think its the CSS code then ill have to wait till its all online and then if its still playing up ill come back to you. Although im pretty sure its due to me moving the line above the main menu so the error will still be there when its online. Before I do that, did you have any thoughts on the first question —- creating the feint line across the menu. The link to my concept designs should show what im after

Cheers as always Nick

Andy

Hi again Nick,

Just tried out both pieces of CSS and the line is now removed from the responsive slide out menu. Thats question ‘b’ sorted….great!

As for question ‘a’, well, im glad you get what im trying to achieve and its almost there. The line goes across the menu perfectly and ive positioned it at the top. However, two things are happening.

a1) I need the long 1px grey line to sit on a layer behind the 2px thick short line. currently, its on a layer above it.

a2) as nice as this line is, its doesn’t scale (or shorten) properly when the responsive menu appears. It just stays at the top and doesn’t scale any further.

Can I just say, to you and the others Nick… you are by far the most supportive post sales service ive ever had dealings with. You’ve actually made me excited to get this site looking exactly as I want it without expecting me to learn everything myself. Gradually, I’ve learnt more and more and its a great experience. Thank you

Hi Nick,

**** I UPLOADED IT AT LAST ****

or at least a demo with dummy content with the home page.

now…..

a) The menu is fixed but I need to create more space at the top (above menu/logo) and below (menu/log) and ensure that when I scroll up and down the page that there is enough space so the ‘moved thick & feint line” dont overlap the menu. This is whats happening at the moment.

b) The HUGE slab text under the slider works well but I somehow want the main heading ‘CREATIVE&DIVERSE’ to wrap when the screen is shrunk to mobile phone dimensions. so it reads….

CREATIVE

&

DIVERSE

Cheers

Andy

Hi there,

Cheers. Bebas works for me but I’m going to set up a class for it as I’m still using h6 across the site. Ill have a go at the code you’ve given me. Thank you