Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 1, 2015 at 2:58 am #496176
    jackthepilot

    On my site, I have http://www.theblondhemian.com/ I have the top log in the centre but when sized down to mobile mode, the logo jumps to the left instead of staying in the centre. Where do I change that so it stay in the center all the time. I also would like that light grey line to disappear when switch to mobile mode.

    Thank you

    September 1, 2015 at 7:26 am #496246
    Basilis

    Hi jackthepilot!

    Your logo jumps there, because the menu area is on the right.
    Where you will move the menu area?

    Cheers!
    Basilis

    November 28, 2015 at 1:46 pm #543933
    jaroljmek

    Hi there Basilis

    Just picking up this thread. I would like to keep my logo centred on mobile screens but in my case I no menu. It is a single page site with no menu items. Is it possible to keep the logo centred in this instance?

    http://tyringhamhall.com/

    Thanks very much indeed

    November 28, 2015 at 7:36 pm #543983
    Dake

    Hey!


    @jaroljmek

    Please insert the following css into your custom css section:

    @media only screen and (max-width: 767px)
.responsive .logo img {
    padding-right: 30% !important;
}

    Cheers!
    Dake

    November 29, 2015 at 9:54 pm #544212
    jaroljmek

    Hi there,

    Thanks for the reply.

    1. That CSS doesn’t seem to work but I found this in another thread that works for iPhone portrait:

    @media only screen and (max-width: 767px) {
    .responsive.html_header_top.html_logo_center .logo {
    left: 25%;
    position: relative !important;
    }}

    2. Is it possible to add a version of this CSS to centre the logo when iPhone is in landscape mode, i.e. with a min- and max-width instruction i.e. 360-640 or similar?

    3. One a similar issue, the first section of this one page site is a Full Screen Slider. The Title and Body Captions don’t centre correctly on iPhone Portrait (“TYRINGHAM HALL A mystery school…”. Any clues how to solve this?

    http://tyringhamhall.com/

    Thanks very much again!!

    December 1, 2015 at 4:02 am #544969
    Ismael

    Hey!

    Please remove the modifications then use this instead:

    @media only screen and (max-width: 767px) {
.responsive #top .logo, .responsive #top .logo a {
    text-align: center;
width: 100%;
}

.responsive .logo img {
    display: inline-block;
    position: relative;
    top: 30px;
}
}

    This will take care of the portrait and landscape view.

    Best regards,
    Ismael

    December 1, 2015 at 10:16 am #545023
    jaroljmek

    Hey Ismael

    Thanks for that solution. That’s great for centering the logo. Can you help with two more small issues relating to mobile:

    1. Mobile screen: the full screen slider title and caption (my first content section) does not centre correctly on mobile

    2. Mobile header: is it possible to adjust the height of the mobile header? I’d like to make it narrower to match the size of the logo.

    Thanks so much!

    December 1, 2015 at 3:45 pm #545291
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.responsive #header_main .container {
    height: 90px !important;
}}
@media only screen and (max-width: 480px) {
.responsive #top .slideshow_caption h2 {
    letter-spacing: 17px;
}}

    Cheers!
    Yigit

    April 11, 2016 at 3:56 am #610907
    bobfurgo

    In regards to adjusting the header height – the code provided worked great but now I can see the background color of the logo spilling over the header container. Is there a way to set the logo’s background color to transparent?

    April 11, 2016 at 4:46 am #610924
    Vinay

    Hey!

    @jaro let us know if you need any help!

    @peanuttario please share the link to the site where we can inspect the element in question.

    Cheers!
    Vinay

    April 11, 2016 at 8:22 pm #611514
    bobfurgo

    Here it is! Thanks!

    April 12, 2016 at 7:09 am #611699
    Rikard

    Hi,

    You have set the background for all element to black !important in your CSS so this might not work, but you can try it: 

    @media only screen and (max-width: 990px) {
strong.logo a {
background-color:transparent !important;
}
}

    Best regards,
    Rikard

    April 12, 2016 at 8:35 pm #612127
    bobfurgo

    Hi Rikard! Thanks for pointing out that I had the element set to black. I took it out from this line of code and it resolved the issue. You can close this ticket :)

    @media only screen and (max-width: 990px) {
    #header, #header * { background: white !important; }
    #header {
    position: fixed !important; }

    April 13, 2016 at 5:58 am #612415
    Rikard

    Hi,

    Great, glad we could help :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Center the logo’ is closed to new replies.