Logo not staying centered plus size on other devices

This topic has 15 replies, 5 voices, and was last updated 7 years, 2 months ago ago by Rose Tyler

  • Avatar: pro2know
    pro2know
    Participant
    August 17, 2016 at 04:00

    Hello I am trying to make the logo centered above the menu in Royal header 18 and it keeps floating right. I use custom CSS to change the size of the logo to make it stretch above the menu but then it throws off all the other devices.

    Please, contact administrator
    for this information.
    14 Answers
    Avatar: pro2know
    pro2know
    Participant
    August 17, 2016 at 04:02

    link for image didn’t take

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 17, 2016 at 07:20

    Hello,

    Please add this code in Custom CSS:

    .header-type-18 .header-logo{
        max-width: none;
        width: 100%;
    }
    .header-type-18 .tbs{
       display: none;
    }
    .header-type-18 .menu{
       border-top: 0px;
       padding-top: 0px;
    }

    Also read our documentation https://8theme.com/demo/docs/royal/index.html#!/primary_menu (7.3 Menu images).

    Best regards,
    Rose Tyler.

    Avatar: pro2know
    pro2know
    Participant
    August 17, 2016 at 11:42

    What code would get rid of some of the spacing between logo and menu & Logo and top of page? Thanks for your help.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    August 17, 2016 at 12:39

    Hello,

    Try to use this code in Custom CSS for desktop section:

    .navbar {
       margin: -40px 0;
    }

    Best regards,
    Jack Richardson.

    Avatar: pro2know
    pro2know
    Participant
    August 23, 2016 at 22:55

    Is there a way to hide all post on a post page that are past say 10 days old or something like that but leave them in the archive in the widget?

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    August 24, 2016 at 09:14

    Hello,

    Sorry, but there is no such option.

    Best regards,
    Jack Richardson.

    Avatar: pro2know
    pro2know
    Participant
    August 31, 2016 at 23:31

    I never checked the mobile version of the website till today and it doesn’t show company logo header on mobile(cellphone) till you scroll down and then it shows the fixed navigation. What could this be? same login as before

    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 1, 2016 at 07:21

    Hello,

    Try to add this code in Global Custom CSS.

    @media only screen and (max-width: 992px){
    .navbar {
        margin: 0;
    }
    }

    Regards,
    Robert Hall

    Avatar: emoney7777
    Eric Bornhop
    Participant
    February 2, 2017 at 20:52

    Having similar issue. Logo appears in center position on desktop/laptop but then shifts left once page fully loads. Please advise

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 3, 2017 at 08:08

    Hello,

    Try to add this code in Global Custom CSS.

    @media only screen and (min-width: 768px){
    .header6 .logo {
        width: 1200px;
        text-align: center;
    }
    }

    Regards,
    Rose Tyler.

    Avatar: emoney7777
    Eric Bornhop
    Participant
    February 22, 2017 at 05:45

    Hey,

    I tried pasting this code into my custom.css file but it appears that its still shifting upon page load. I also noticed that on the mobile version, the logo is centered but the menu bar appears on the right side at the very edge of the screen instead of the usual slightly spaced and left side position on other pages. Maybe this will help solve the problem.

    Thanks

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 22, 2017 at 11:26

    Hello,

    Please add !important to previous code http://prnt.sc/ebxmae
    And this code in Custom CSS for mobile

    .home .header .menu-icon {
        left: 0px !important;
    }
    .home .menu-icon i {
        left: 0;
    }

    Regards,
    Rose Tyler.

    Avatar: emoney7777
    Eric Bornhop
    Participant
    February 22, 2017 at 21:04

    Hi,

    This code fix appears to be working for the mobile issue, although I noticed the same problem on my iPad, but only when in portrait mode. The problem still persists with my laptop after i added the !important. This is what I have in my custom.css file

    @media only screen and (min-width: 768px){
    .header6 .logo {
    width: 1200px !important;
    text-align: center;
    }
    }

    Your help is appreciated!

    Cheers

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 23, 2017 at 10:00

    Hello,

    Please, check your custom css: http://prntscr.com/ecc4a6
    You need to use this code:

    @media only screen and (min-width: 768px){
    .header6 .logo {
        width: 1200px !important;
        text-align: center;
    }
    }
    @media only screen and (max-width: 980px){
    .home .header .menu-icon {
        left: 0px !important;
    }
    .home .menu-icon i {
        left: 0;
    }
    }

    Regards,
    Rose Tyler.

  • Viewing 15 results - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.