Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • April 12, 2017 at 2:30 pm #776659
    farzanahmed

    Hi
    I’m trying to add a header image in the middle of the header space between my logo and the menu, and have got somewhere following this

    https://kriesi.at/support/topic/adding-468-x-60-banner-to-header/

    However, I can’t seem to move it to the centre with the css code – I changed the code by replacing the zero’s, but it either sits in the left of the header (over the menu) or on the right (over the logo).

    Any help will be appreciated on that.

    Thanks
    Farzan

    April 12, 2017 at 4:20 pm #776778
    Andy

    Hey farzanahmed,

    you can move it using this code inside Quick CSS field:

    .custom_content {
left: 170px;
}

    Adjust as needed.

    Best regards,
    Andy

    April 12, 2017 at 4:35 pm #776798
    farzanahmed

    Thanks Andy

    That helped, but can I make it stay in that position when the screen size changes?

    Maybe its something to do with the ‘absolute’?

    Here’s the css I’ve got in there now

    .custom_content{
    position: absolute;
    top: 0;
    right: 0;
    }

    @media only screen and (max-width: 768px) {
    #header_main { height: 140px; }
    .custom_content { top: 80px; }}

    .custom_content {
    left: 470px;
    }

    Thanks
    Farzan

    April 14, 2017 at 12:40 am #777596
    farzanahmed

    Any updates?

    April 14, 2017 at 1:57 pm #777819
    Andy

    Hi,

    yeah, you should remove position: absolute; and instead you might want to go for

    position: static;

    or maybe removing it will already work.

    Also you might need a bigger header, as there is not enough space available otherwise:

    @media only screen and (max-width: 768px) {
#header_main {
height: 250px;
}}

    and adjust as needed.

    Best regards,
    Andy

    April 14, 2017 at 8:34 pm #778055
    farzanahmed

    Hi

    That didn’t do anything.

    Could you take a look to see what i’m doing wrong in there please?

    I’ll submit the login credentials in the private content area.

    Thanks
    Farzan

    April 17, 2017 at 10:09 am #778590
    farzanahmed

    Hi

    Any update? Assuming you’re away for hols?

    April 17, 2017 at 11:22 am #778623
    Andy

    Hi,

    I checked your website on mobile and it looks better now to me. You might want to move the mobile menu and cart button into another place. Try this for example:

    @media only screen and (max-width: 767px) {
.container #advanced_menu_toggle, #advanced_menu_hide {
top: 30px;
right: -20px;
}
.responsive #top .cart_dropdown {
top: 30px;
right: 8px;
}
}

    Best regards,
    Andy

    April 17, 2017 at 11:25 am #778624
    farzanahmed

    Hi Andy

    My primary concern at this stage is how the header image looks on a normal screen – it’s sitting behind the logo but I want it between the logo and the menu items on desktops/laptops and hidden on mobiles even.

    Thanks
    Farzan

    April 17, 2017 at 12:19 pm #778644
    Andy

    Hi,

    use this code for desktop:

    .custom_content {
left: 270px;
position: relative;
}

    Best regards,
    Andy

    April 17, 2017 at 12:33 pm #778653
    farzanahmed

    Thanks Andy, that works ok until it’s a smaller screen – it just stays in its position and the menu comes in over the image?

    April 17, 2017 at 12:39 pm #778655
    farzanahmed

    Also, is there a way to make it smaller for the ‘always on top’ header area?

    April 17, 2017 at 1:13 pm #778668
    Andy

    Hi,

    be specific and let me know on which device you see the issues. You can work with media queries to make my code work on different screen sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

    April 17, 2017 at 1:17 pm #778672
    farzanahmed

    Hi

    Seeing it on my desktop Andy.

    Please see here http://somup.com/cbfbXoVckD

    Thanks
    Farzan

    April 18, 2017 at 3:08 pm #779339
    Andy

    Hi,

    we can’t really help you with building lots of custom code for you for different screen sizes on your desktop. But as we already did we can point you to the right direction. So now use the code we’ve provided to you and wrap different media queries around it. Again here you go with how to use media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Have in mind that responsiveness doesn’t mean that it looks the way you want it to look like on every screen size, but to have the possibility to control it the way you want it to look like. Also it means that it looks good on different devices and not when you shrink your browser screen on one specific device (desktop device).

    Best regards,
    Andy

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