Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #23374

    Hi there,

    I had some help from Nick to move the ‘underline effect’ on the main menu so it sits above the menu text and moves with the rollover action. However, whilst this all works fine, I noticed that when I shrunk the page to when the responsive menu kicks in


    whilst in the responsive slide out menu a thick line appears across the menu. Its clearly as a result of moving the line in the main menu. How do I get rid of this as I want it to look exactly the same as in the demo. Can it be hidden or reset whilst in this responsive mode.

    Cheers

    Andy

    #119577

    Hi,

    What is the code that you have right now, the code that Nick gave you? What header style do you have?

    Let me tag Nick.

    Regards,

    Ismael

    #119578

    Hi,

    I will need to see the page where this is taking place, you can use goo.gl to mask the url.

    Thanks,

    Nick

    #119579

    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

    #119580

    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;
    }

    #119581

    Hi,

    I don’t see any error in responsive mode here andypeck.co.uk — http://i.imgur.com/EJjOsdG.png

    Please show which page on your site is experiencing this issue.

    Thanks,

    Nick

    #119582

    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

    #119583

    Hi Andy,

    You could try something like this in a media query for mobile and below:

    #menu_section .opened_menu {
    border-top: 1px solid white !important;
    }

    Regards,

    Devin

    #119584

    Hi,

    Ahh just css to add to custom.css , before i thought you posted a chunk of css from one of the template files. Nice customization to menu , looks good. Try this please

    #top .avia-menu-fx {

    top: 40% !important;

    }

    ‘The small size menu no longer has that line strike through each menu word.

    Thanks,

    Nick

    #119585

    Hi there,

    Talking of menu customization. in the image I supplied:

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

    Menu questions:

    a) Can I put the social media icons over to the right above the menu. Possible?

    b) Can I control the colours of the social media icons, if I have to have the very top bar (after ive moved icons to the right), can I make it same color as my main menu thus making it appear as part of that menu?

    b) I would like to allow it to be a fixed menu (and remain always at the top) but the ‘line’ over the menu doesnt move with the menu when stretching and the padding beneath the menu and logo is reduced too far so the slider overlaps the menu. How can I fix/increase the padding/bottom margin?

    #119586

    Hi,

    a) That line is the top border of the main content block and it cant be moved without moving the entire content area. You can see what I mean here, http://goo.gl/BCmSy.

    I am not sure if this can be easily done where you want it. You can try something like this. Play with the 40px, and try it as 40% (well some percent)..

    #top .main_menu {
    height: 40px;
    border-bottom-color: rgb(0, 0, 0) !important;
    border-bottom-width: 1px;
    border-bottom-style: solid !important;
    }

    b) add this css to get rid of the line in mobile menu

    @media only screen and (max-width: 767px) {
    #top .avia-menu-fx {
    border-width: 0px !important;
    }}

    bb) need to see the code.

    Thanks,

    Nick

    #119587

    Hi Nick,

    Ill give this a go.

    Im pretty well set on my structure but there are a few teething issues (the line above menu) which you will need to see before I can expect you to help much more. I’m moving it all online this weekend and then we can review.

    Ill keep tweaking and asking questions on here till the weekend and then we shall see how it looks live

    Cheers

    Andy

    #119588

    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

    #119589

    Oh, and looking at a2) again. I guess all that needs to happen is this newly drawn grey line needs to just switch off whilst the responsive menu is operational. The line scales up until that point so I guess it just needs a switch. Would I be right?

    Cheers

    Andy

    #119590

    Hi,

    My imagination only goes so far, can you gather all the css code to the point where you are so that I can add it to the demo to get the exact look you have , and tell me the url of the demo just to make sure. Because I had everything look fine, but it doesn’t on your site, that means that there is css or some customization i am missing. So at this point either show me the site, or test yourself first on the demo by adding the css and then paste here.

    Thanks,

    Nick

    #119591

    Cheers Nick,

    yes, I was pushing my luck wasn’t I? Ill upload my site at the weekend and then go from there.

    Cheers

    Andy

    #119592

    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


    but only in smallest sizes as its ok to just shrink with everything else till that point

    Cheers

    Andy

    #119593

    Hi,

    For create&design, the solution is to use EM and not PT to define the size of the font since em is responsive. If you changed the font size to 5.5em it will shrink . Not sure if that font is working on not since removing the font family doesn’t change anything for me.

    h6 {
    font-family: BebasNeueRegular,Geneva,Arial,Helvetica,sans-serif!important;
    font-size: 5.5em !important;
    }

    =====================

    for more space please open up /js/avia.js and find line 766 and change it to look like. You can change the 116 to a number you want the height of the header to be. Start off with changing it to the height of your logo and work up from there.

    el_height       = 116,

    Thanks,

    Nick

    #119594

    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

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘Enfold – Responsive Slide Out Menu **ISSUE**’ is closed to new replies.