Tagged: , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 10, 2015 at 1:27 pm #500998
    Fionadee

    Hi, I am trying to create a layout where the ‘Header Phone Number/Extra Info’ is centred horizontally between the logo and the social media icons. Is there a way of achieving this?
    e.g. arranged like this:
    Logo graphic – ‘Header Phone Number/Extra Info text’ – Social media icons
    See my link attached below.
    (I already have a few lines of Quick CSS which adjust font style and size of this area).
    Are you able to help?

    September 10, 2015 at 5:04 pm #501175
    Elliott

    Hi Fionadee!

    Add this to your custom CSS.

    .phone-info {
  float: none !important;
  left: 50%;
  position: relative;
  transform: translateX(-25%);
}

    Cheers!
    Elliott

    • This reply was modified 9 years, 3 months ago by Elliott.
    September 10, 2015 at 5:43 pm #501227
    Fionadee

    Many thanks!
    This is great for centering the text but I would really like to have all elements aligning on one baseline. You can see an example of my preferred layout on the original link – it’s a png image placed below the slider. Is this possible? Or will it mess up the responsive features?

    September 10, 2015 at 5:50 pm #501232
    Elliott

    Hi!

    If your just trying to move it down so it’s on the same line with the social media then try adding this.

    @media screen and (min-width: 767px) { .phone-info { top: 85px !important; } }

    Otherwise take a screenshot and highlight your intentions so we can get a better idea.

    Best regards,
    Elliott

    September 10, 2015 at 6:04 pm #501246
    Fionadee

    Thanks for your help Elliot!
    This works fine on my large monitor but the layout does not translate smoothly when the screen size is reduced (there is clipping on the right and the text doesn’t behave well with the sticky header…) I’ve included a screenshot on the updated link (below the full-width slider) to show my intended layout.

    September 11, 2015 at 11:38 am #501549
    Fionadee

    Hi Elliot!
    I have tried your other suggestion:
    “If your just trying to move it down so it’s on the same line with the social media then try adding this.
    @media screen and (min-width: 767px) { .phone-info { top: 85px !important; } }”
    Very helpful, but it doesn’t quite work with my layout. I think I’ll try something that better fits with the theme style.
    Thanks for your patience!

    September 13, 2015 at 7:14 am #502201
    Rikard

    Hey,

    I tried to login but the details don’t seem to work anymore? Please let us know if you should need any more help on the topic.

    Regards,
    Rikard

    September 13, 2015 at 2:05 pm #502304
    Fionadee

    Hi Rikard, thanks for following this up!

    I have a workable header now, but it still looks unbalanced on a large screen. I would like the logo to fill the space better on larger screens – the problem is if I make it bigger then the top bar text and logo overlap when viewed on anything smaller than a portrait iPad screen.
    Is it possible to specify a larger logo which extends into the top bar area, which would then shrink (at the critical breakpoint) to enable viewing on smaller devices? Are you able to advise on CSS for this?
    Regards,
    Fiona

    September 15, 2015 at 2:38 pm #503359
    Elliott

    Hi!

    For displaying a different, smaller logo on mobiles try this out, https://kriesi.at/support/topic/different-logo-for-mobile-version/#post-238916.

    Best regards,
    Elliott

    September 15, 2015 at 3:17 pm #503395
    Fionadee

    Thank you Elliot! This is great, I will see if I can make it work – it will be a good opportunity to begin working with media queries!

    September 15, 2015 at 8:21 pm #503664
    Andy

    Hey!

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Regards,
    Andy

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Re-position and edit Header Phone Number/Extra Info’ is closed to new replies.