Ok Dude,

I think you will have to just treat me as an idiot and take me through this in baby steps.

a) I create a text box on my Home page

b) I write a title and add your code incl the Entypo code (&#128247 which represents the camera icon)

c) all I get is my title and a square box which clearly means im writing garbage

Where am I going wrong?

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

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 working on a local server at the moment otherwise I would be more than happy to share my findings. Not sure about the bit about masking URLs unless theres another way of me showing you my site. What I think ill do is transport what Ive achieved to-date onto my live hosting account and then let you know. I’d prefer not to have to do it but it seems you cant easily help otherwise

Ill try and do it this weekend

Andy

Hi there,

I found a way by creating a 6×2 image grid and then importing my own mono logo for each one. I assume I can make each box link to either a URL or my own portfolio page. Not as funky as having it switch colours but for now it works a treat. There’s a nice rollover effect and a thin wire frame surrounding everything too. A work-a-round I do believe!!!

Cheers as always

Andy

Thanks for getting back to me but what im after is a replica of what you use for a shortcode where the line extends to the right of the headline text.

On the enfold demo site theres an example pages drop down and one of these is called ABOUT US. If you look, theres a heading called WELCOME AT OUR AGENCY and the type of line im referring to is there (next to it, flowing across to width of the column)

How can I do this in the FOOTER WIDGET headings?

Cheers

Hi there,

I love the theme so I have indeed stuck with it and thx Lounge35 – I think ur right that transparent pngs might be the way to go. I hit a frustration point yesterday which is why I snapped but as with all these things is just a case of finding a work-a-round.

Cheers all

Oh and if the rollover effect is very complex then can someone just suggest how to set up the basics for now and ill tackle the rest later

Cheers

Thanks.

The first bit is great although I think you may have not quite understood my question about the footer. I dont want a line to span across all three widgets as I realise that would require alot of work. What im after is to add a bit of decoration by applying a middle horizontal line after a widget title that ‘only’ spans the width of the individual widget. Therefore the end result would be WIDGET 1 TITLE followed by a decorative line….[Column GAP]….WIDGET 2 TITLE followed by a decorative line….[Column GAP]….WIDGET 3 TITLE followed by a decorative line.

I want it to behave the same as the shortcodes you supply but obviously I appreciate this would be CSS code instead.

Can you help?

Cheers

Andy

Great stuff Thank you

Hi there,

Im testing out with Full Width Easy Slider but as I want to add my own colors for the text box and the fonts im figuring the best one will be the Advanced Layer Slider. I have Revolution too which I know from experience can be tricky to use anything other than google fonts. I would like to use Bebas Neue for not only for my Slider but also in a SLAB TEXT HEADER

Cheers

Done it! its getting easier.

Thanks for the video too….

Now all I need to do is explain how to actually create this 1px grey solid line that spans the entire menu (Home, Portfolio, Blog, Contact, About Me) and sits behind/at the top of the highlight line we’ve just moved up. I worked out how to make the highlight line 3px deep and adjusted its position

Ill set up a dropdown menu and check that it all still works. I forgot to mention that my aim is to change the dropdown menu background colors and not change the text. Hence… ROLLDOWN – Background is black, ROLLOVER – Highlight background changes to a deep orange and theres a subtle text colour change too. Ill play around myself and see how I get on

Is there a way for me to send you an image?

Once ive done the menu ive pretty much got everything else within the theme as normal. I might want to create a giant slabtext on my home page only but thats it. Just so you know that I wont be sitting on your coat tails for the entire site!!!!!!

Cheers

as always

Hi there,

Well, im having fun trying things out but the menu/navigation is a tricky beast. Ive been trying all sorts of things but nothing seems to work even following other peoples examples and following your process still leaves me stumped… here’s what Id love to do

1) Increase the font size but make it responsive in the right way

2) Change the word spacing

3) Remove the triangle tick over the line and thicken the line

4) Change the colours of the OFF/ROLLOVER & ON states of any dropdown

nice to haves

5) Move the Menu (highlight line) above the text

6) Add a feint line attached to this that spans the entire menu set

Is this all BIG LEAGUE stuff or can I do any of this relatively easily?

Cheers again for all your support

Andy

p.s if theres a way to send me an image of what im trying to do then please let me know and ill send a jpg

Hey Nick,

I think ive fathomed how to change the color although I seem to wrestle with internal CSS components which seems to mean my code is ignored half the time. Theres clearly a process I need to go through but its a bit hit and miss.

**/SEE BELOW/**

.avia-icon-list .iconlist_icon{height:64px; width:64px; line-height: 60px; font-size: 30px; text-align: center; border-radius: 500px; position: relative; float:left; margin-right:30px; margin-left:2px; z-index: 5; border-style:solid; border-width:2px; color:#fff;

}



.main_color .avia-icon-list .iconlist_icon {

background-color: #d73119;

}

it seems that I can do it providing I have both parts but im not sure why. I got the first part from another post.

Anyway, my last question on this is how do I create this same entypo disc without the the list content to the right. This is mainly because I want to create individual entypo discs with my own descriptive text either above or below it (centred or left justified). Im kicking myself for not just asking that question at the start

Cheers

Andy