Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 27, 2015 at 10:36 pm #403702
    cworkman1

    hi.

    thanks so much for all your help so far. i finally have a grasp on the enfold structure and hierarchies but i’m now starting to customize some things and i’m running into some issues.

    you can find the page i’m editing here:
    cindyworkman.com

    here’s a break-out of the problems i’m encountering – and apologies for the length of this post but a few items seem to piggy-back on others so i thought it best to keep it all together:

    main nav:

    1. i’d like to have a full screen main menu but all the various css code snippets i’ve found on the forum don’t work. i’d like it to look like this – where the height of the menu remains static no matter what size the window is resized to but the L/R padding of each section (do you call this a button?) would increase or decrease depending on the browser window size. Text remains centered in each button and retains it’s size of 12px:

    cindyworkman.com/cw_images/fullscreen_menu_example.jpg

    NOTE: this image is from a photoshop comp so it looks like i might be asking for some white space on either side but i don’t want any white space. imagine the black single pixel lines on the left/right side are the boundaries of the browser chrome.

    2. I’ve used some custom css to adjust the height of the menu (and perhaps what i used is wrong – it’s noted below) but i can’t seem to get rid of the 2 horizontal lines above and below the menu. i’m not even sure these lines are part of the menu – they may be part of another element (logo, logo box) that i previously hid. and as i can’t see under the hood to see what i’m targeting (like with html) it’s been hit or miss as to what element to address in my custom css.

    can you please tell me how to get rid of these? thanks.

    /*main menu height*/
    .av-main-nav > li, .av-main-nav > li > a {
    height: 41px !important;
    line-height: 41px !important;
    }

    3. I’d like my menu be sticky BUT appear after the 1st color section and above the 2nd color section. I’ve uploaded a jpeg so you can see what i have in mind:

    cindyworkman.com/cw_images/nav_color_section2.jpg

    and yes, my intention is to have only an image with hotspots for the first color section on the page – which would go right up to the top edge of the browser chrome.

    4. i’d like to customize the active state background color for my menu items. currently i have adjusted the hover color in the advanced styling but there’s no option for the active state and i’m not sure what to target – i tried this code but it doesn’t work:

    /*menu background color for active section NOT WORKING*/
    .main_menu ul:first-child>li a:active {
    color: #3d3d3d;
    }

    can you please tell me what the css would be for this? thanks.

    5. When I resize my browser window to be really small – the menu is completely disappearing? i assume it’s going into hibernation as the browser window at it’s smallest size = a phone or tablet. but, that said, there’s no way to then see the menu ‘tablet icon’ while i’m building my page?

    am i correct in describing this behaviour – or is something coded wrong with my menu? and is there a way to see this tablet icon on-screen using a browser?

    header/footer overlap

    1. currently both the header and footer are overlapping my page content e.g. the color sections. how would i have both the fixed menu and the fixed footer abut these color sections? e.g. share a common edge rather than overlap?

    Footer

    1. After a lot of fiddling around using both images and/or text inside a text widget in my footer, i’ve settled on using one image (dots and copyright line) – which is what you currently see on the example page.

    when i only enter in text, it works correctly and the content is vertically aligned, but as you can see using only an image there’s more space below the image than above. how would i adjust this?

    Additionally, i’d like this image to be right aligned with a padding on the right side of 21 px. currently there’s pretty big gap there and i can’t figure out why?

    and lastly, when i make my browser window smaller, the height of the footer increases so it’s huge. how can i retain the height it is when it’s full expanded?

    and fyi: the footer’s been set to be ‘sticky’.

    here’s the css i currently have – which did adjust the height of the footer and somewhat get the image to the right side:

    /*changing the padding on the footer*/
    #footer {
    padding: 0 !important;
    }

    /*right aligning the footer text widget*/
    #footer .widget .textwidget {
    text-align: right !important;
    }

    /*making the footer sticky*/
    #footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 10000;
    }

    Responsive Images

    i have been playing around quite a bit to get exactly what i want visually and behaviour-wise.

    the sample page noted above for my site (cindyworkman.com) includes lots of different variations tested to achieve my goals. for simplicity’s sake, please refer to the 1st color section and the layer slider right below this first color section as illustrations of what i’m describing below.

    currently i have a one-page site using color sections with background images. When a browser window is fully expanded i’m seeing only one color section at a time – and this is what i want. when i expand the browser window to make it wider, the image is still great. but, when i reduce the size of my browser window (height, width or both), the image is not responsive and it is not resizing.

    i saw another post where there were instructions to adjust the background image to ‘stretch to fit’ and ‘center-center’ and while this does stretch the image effectively (when a browser window’s width is made larger), it does not resize the image when the browser window is made smaller (height, width or both). and it centers the image in the color section – which for me was worse as my image was willy-nilly clipped on both the left and right sides.

    for my purposes, ‘stretch to fit’ produces a good visual result. but i also need to choose one of the fixed positions (e.g. bottom left) so i can control how my image gets clipped. in the end, how do you get this background image to responsively resize itself proportionally (based on a fixed point (e.g. bottom left)) when a browser window is made smaller or the site is viewed on a phone/tablet?

    should i be using one of the other media elements?

    i tried several other methods:

    – nesting an image inside the color section. this didn’t work – and no longer on this sample page.

    – just placing an image on the page. this also didn’t work as it created lots of surrounding white space. no longer on the sample page.

    – i tried a fullscreen slider with a single image but it also didn’t respond responsively? it behaved just like the color section described above.

    and lastly i did a cursory peek at the site on my ipad and just see a clipped image?

    what do you suggest as a solution? i’d prefer to stick with the color sections as they are easy/already coded with anchors to the various sections of the page but i’m open to anything….

    thanks in advance for all your replies and suggestions.

    cheers-

    cindy

    March 2, 2015 at 7:06 am #404318
    Josue

    Hey Cindy!

    – main nav
    1, 2, 3, 4 and 5. To accomplish what you want you’d need to use a FullWidth Menu element (it has a “sticky” option) instead (and hide the header), you can place it after the Image with Hotspot Element, like this – http://screencast.com/t/llpTZBvfNydy

    – header/footer overlap
    Switch to FullWidth Menu first and then post a screenshot of the issue.

    – footer
    Change your footer alignment code to this:

    #footer .container{
    padding: 0 10px;
}
#footer .widget .textwidget {
    overflow: hidden;
}
#footer .widget .textwidget img{
    float: right !important;
    display: block;
}

    Let finish those points first and then we’ll move on with responsive images.

    Best regards,
    Josue

    March 2, 2015 at 11:44 pm #404852
    cworkman1

    dear josue,

    thanks for your reply and all your suggestions – so appreciated!

    first, the footers a done deal – it now works! thank you! i had to add some more css styling to one of your bits to get the image position lower and more to the right :

    #footer .widget .textwidget img{
       float: right !important;
       display: block;
    margin-bottom: -2px;
    margin-right: -30px;
    }

    and i used a max-height attribute to stop the #footer from getting taller when i made the browser window smaller.

    i also hid the header and got the submenu in the right location and sticky – so hooray!

    unfortunately though i couldn’t customize it at all. i tried every configuration i could think of (my own custom class and all the classes i could find in the shortcodes.css (e.g. .av-submenu-container, .av-subnav-menu, etc.) but couldn’t get the results i wanted.

    here’s a picture of what i currently have vs what i’d like:

    http://www.cindyworkman.com/cw_images/menu_josue_030215.jpg

    while i could adjust font attributes, here’s a list of what i had trouble with:

    – changing the height of the menu. i’d like it to be 42px
    – i’d like the menu buttons to expand the full width of the menu
    – i’d like the active background color to be #5c5c5c
    – i’d like there to be a border between buttons (running the full vertical height) and along the top and bottom of the whole menu bar

    thanks in advance for your help and yes, i’d like to tackle the overlap and the image responsiveness once this is sorted out.

    cheers-

    cindy

    March 3, 2015 at 2:02 am #404889
    Josue

    Hi Cindy!

    Use the following:

    @media only screen and (min-width: 767px) {
    #menu-main-menu.av-subnav-menu > li{
        width: 25%;
        padding: 0;
        margin-left: -4px;
    }
}
#top .av-subnav-menu > li > a{
    padding: 9px 10px 10px 12px;
}
#top .av-subnav-menu > li.current-menu-item > a{
    background: #5c5c5c !important;
}
#top .av-submenu-container, #top .sticky_placeholder {
    height: 42px;
}

    Also open js/avia.js and change line 78:

    $('body').avia_scrollspy({target:'.main_menu .menu li > a'});

    To:

    $('body').avia_scrollspy({target:'.av-submenu-container li > a'});

    Cheers!
    Josue

    March 7, 2015 at 1:10 am #407363
    cworkman1

    dear Josue,

    thank you so much for your reply.

    i tried your code suggestions but unfortunately it didn’t work. and fyi: i cut and paste your code for the .js file but dreamweaver flagged a syntax error. don’t know if this contributed to the failure.

    at this point i’m caving and hiring some talent through werkpress. even with my background coding (16 years – which i’m sure you’ll find shocking) i’m finding it way too time consuming and hit-or-miss with the naming conventions/nesting to adjust the enfold elements to my needs.

    hopefully werkpress is the solution – otherwise i’ll be back on the forum.

    and again, thanks so much for all of your help which has helped me get the lay of the land.

    cheers-

    cindy

    should

    March 7, 2015 at 2:06 am #407372
    Josue

    Hey Cindy!

    Sure, we’re always here to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.