Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 25, 2016 at 9:54 am #621110
    jvivies

    Hello,

    I’ve chosen a boxed-type layout with centered logo, menu above – width 1200, header width = 192. The questions are :

    – margins appear on the sides of t he logo (!)
    I’d like the logo to be 1200*192 and fill the width of the box.
    Also : it’s disappearing under the menu when I scroll down (!)

    – menu above : what would be the css to align it on the right of the box ?

    – Other issue : the menu is supposed to have small borders but they do not appear (?)

    – Also I’m tryong to put 2 images side by side in a color section below – 2*600px and they don’t seem to fit well, probably due to the same margin question (?)

    Thanks very much in advance !

    • This topic was modified 8 years, 6 months ago by jvivies. Reason: found other issue with logo disappearing when scroll down
    April 27, 2016 at 11:45 am #622941
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .html_top_nav_header .av-logo-container {
    max-width: 100%;
    padding: 0;
}

#top .av-subnav-menu {
    text-align: right;
    padding-right: 15px;
}

    Cheers! 
    Josue

    April 27, 2016 at 2:34 pm #623091
    jvivies

    Hi Josue,

    Thanks a lot for your help, it looks already much better !

    I’m still facing one issue with the logo :
    – When I scroll down, the logo disappears under the menu with the rest of the page (!) – How to keep the logo fixed under the main menu and only the content of the page would move ?

    Thanks very much in advance for the additional help.

    — Jerome.

    • This reply was modified 8 years, 6 months ago by jvivies. Reason: solved one on the problems - took it off
    April 29, 2016 at 7:37 pm #624720
    Josue

    Hi,

    You could do that with this:

    .av-section-bottom-logo {
position: fixed;
top: 51px;
z-index: 100;
max-width: 100%;
}

.html_top_nav_header.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 243px;
}

    But it won’t look good on smaller screens due to the logo image size (it’s too wide), i think you’d need to re-factor the logo a little bit to make it work.

    Best regards,
    Josue

    April 29, 2016 at 11:21 pm #624823
    jvivies

    Hi Josue,

    Thanks a lot for your help.

    I thought it would be a simple tweak to change the behaviour of that logo, but it appears far more full of consequences… you’re right, if I apply this code, the logo bursts the website on the right side on smaller screens – not acceptable.

    I’ve tried to use a cut of that logo + backgroud img, but I have to more issues : the bkg img appears in the menu, and the code to fix the logo area makes the bkg img disappear (?).

    I hope that fixing logo for boxed config with menu above will come as an improvement in a future version (!)

    Thanks again,

    — Jerome.

    April 30, 2016 at 1:17 pm #624976
    Josue

    I’ve tried to use a cut of that logo + backgroud img, but I have to more issues : the bkg img appears in the menu, and the code to fix the logo area makes the bkg img disappear (?).

    This could work with proper CSS tweaking, let me know if you want to try that.

    April 30, 2016 at 3:31 pm #625053
    jvivies

    Oh yes, definitively, if you’re willing to help me a bit more, it would look much better.
    I’ve now set the website with a background image for the logo area + the logo which is much smaller than previously.
    The CSS tweaking needed is :
    – take off background image from the menu (menu bckground should be white) ;
    – make that the whole logo area (logo + background color img) stays in place and do not disappear under the menu when scrolling down – (I hope that the background img will have a different behaviour than the logo img and will not exceed the right border of the boxed content);
    – make that all this looks still nice on smaller screens and smartphones…
    Thanks a lot in advance !
    — Jérôme.

    April 30, 2016 at 3:53 pm #625063
    Josue

    Ok first set the header background to white (in Theme Options) and add this code to Quick CSS:

    .av-section-bottom-logo {
    position: fixed;
    top: 51px;
    z-index: 100;
    max-width: 90%;
    background: url("//www.marchecouvert-albi.com/wp-content/uploads/2016/04/Marché-couvert-dAlbi-logo-fond.png") 50% 50% repeat-x scroll rgb(255, 255, 255);
    width: 1200px;

}

@media only screen and (max-width: 989px) {
    .av-section-bottom-logo {
        max-width: 100%;
    }

}

@media only screen and (max-width: 767px) {
    .av-section-bottom-logo{
        background: white !important;
        top: 0
    }
}

.html_top_nav_header.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 243px;
}
    April 30, 2016 at 4:28 pm #625067
    jvivies

    Wow, look like magic !!
    Thanks for the blitz answer !
    That’s so great !

    Thre’s just a thing I don’t understand : it’s perfect from perfect with firefox, but in chrome, le logo area is situated too high, partly under the menu, and there’s a white space with the following images…
    I’ve tried to tweak the “top:51px” instruction but then it’s under firefox that it won’t work…

    Browser constraints ?

    Tahnks for your help !

    — Jérôme.

    April 30, 2016 at 4:31 pm #625068
    jvivies

    Oops, sorry, I got it : it’s the WP edition bar that influences the logo behaviour – as I work under chrome (!)
    I tried with another chrome session, it looks good.
    Thanks very much again !!
    All this is very usefull to me as I’m setting more customers with enfold theme.

    April 30, 2016 at 10:54 pm #625145
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

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