Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • October 22, 2015 at 2:43 pm #522986
    Fionadee

    Hi,

    I have made a header with a centred logo and ‘phone number’ text centred below.
    http://the-kew-plantsman.co.uk/plants/

    I would like to remove the small top bar white space, left after moving the phone number text down – without deleting the phone number text. I have tried various solutions after searching the forum but not one that works in this instance.

    Also I would also like to adjust the size and position of the woo commerce cart logo (including the icon that shows number of items in cart), so that it appears in or close to the menu bar.

    I hope you can help…

    Many thanks
    Fiona

    October 22, 2015 at 2:49 pm #522996
    Yigit

    Hi Fionadee!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

     #header {
    margin-top: -31px;
}
@media only screen and (min-width: 1024px) {
.html_cart_at_menu.html_bottom_nav_header #menu-item-shop {
    right: 23%;
    top: 59%;
}}

    Best regards,
    Yigit

    October 22, 2015 at 3:46 pm #523057
    Fionadee

    Hi Yigit, thanks for the fast reply!

    This helps but I’m not quite there yet!

    The cart icon solution looks great on a full size screen, but slides out of position as the window size is reduced, on an ipad in portrait format it jumps back up to the previous position. Am I making things complicated by having a centered menu? A left or right aligned menu would be fine. The only reason it is centered is to centre the logo. If I can target the logo separately maybe this would work. On your demo page the cart seems to be part of the menu – is this possible with my set-up?

    Moving up the top bar space has resulted in space below the menu – is there another way of reducing the top bar? Could the div height be reduced instead?

    October 23, 2015 at 12:42 pm #523699
    Andy

    Hey!

    quite difficult to imagine what you are writing. Could you send us a mockup showing what you want to achieve? you can use imgur.com or dropbox. This way we can provide you some precise CSS code to achieve what you want.
    If you want to adjust Yigit’s code for other screen devices, then just adjust the media queries. Have a look at this link about media queries for different devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Cheers!
    Andy

    October 23, 2015 at 1:57 pm #523798
    Fionadee

    Thanks Andy, I will get back to you after the weekend with a clearer description!

    Fiona

    October 23, 2015 at 2:03 pm #523808
    Yigit

    Hey!

    We will keep the thread open and wait to hear from you :)

    Best regards,
    Yigit

    October 27, 2015 at 4:55 pm #525606
    Fionadee

    Hi,

    Thanks for the media queries link!
    Here is a clearer description of what I’m trying to achieve:
    1. I would like to reduce space below the menu bar.
    2. The cart icon overlaps the menu on an ipad in portrait. I think it would help if the menu was aligned left, which would allow more space for the cart icon.
    So my question is, what is the best way to align the menu left while keeping the main logo centered?
    http://the-kew-plantsman.co.uk/about-3/

    Many thanks,

    Fiona

    October 28, 2015 at 12:55 pm #526052
    Ismael

    Hey!

    Thank you for the update.

    1.) Use this in the Quick CSS field:

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

    2.) Add this to adjust the position of the cart icon:

    .html_cart_at_menu.html_bottom_nav_header #menu-item-shop {
    float: left;
}

    Best regards,
    Ismael

    October 28, 2015 at 2:01 pm #526078
    Fionadee

    Fab! That works with the addition of !important to a couple of lines.

    Many thanks!

    October 28, 2015 at 6:42 pm #526344
    Fionadee

    One more thing …
    Your code above worked great for removing space below the menu, but on mobile devices I now have a large space (between the menu and first heading) . 

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

So I have tried this and variations, but without success:

    @media only screen and (max-width: 766px) {
    .html_header_top.html_header_sticky #top #wrap_all #main {
        padding-top: 0px !important;
    }}
    Please can you help me target the correct element?

    October 30, 2015 at 8:14 pm #527678
    Andy

    Hey!

    use this code in Quick CSS field: 

    @media only screen and (max-width: 767px) {
main.template-page.content.av-content-full.alpha.units {
margin-top: -225px; 
}}

    and adjust as needed.

    Regards,
    Andy

    October 31, 2015 at 10:51 am #527881
    Fionadee

    Hey Andy!

    Thank you. This didn’t work, but I tried adding a media query to the original code and this has solved the problem:

    `@media only screen and (min-width: 767px) {
    .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 216px !important;
    }}

    Many thanks,

    Fiona

    October 31, 2015 at 10:55 am #527883
    Fionadee

    Sorry guys, I spoke too soon!

    This doesn’t work for all pages on mobile devices.

    October 31, 2015 at 1:02 pm #527894
    Fionadee

    Solved!
    There was an error in my original code, this is what worked:`
    @media only screen and (max-width: 766px) {
    .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
    }}

    Thanks for your patience.

    Fiona

    November 2, 2015 at 8:24 am #528290
    Rikard

    Hi,

    Great, glad you got it fixed :-)

    Cheers!
    Rikard

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