Change position of logo to left of navigation

  • Resolved sfortune

    (@sfortune)


    10 years, 8 months ago

    Hi, love your beautiful theme! One minor issue…

    I have been trying to put the logo on the top left (on left of navigation)… I succeeded to some extent but my CSS has two issues (1) The logo image doesn’t totally link to the homepage — only the corner of it does (2) By putting it to “Absolute” this affects the responsiveness aspect of the theme.

    Here’s the CSS edit:
    #logo { position:absolute; left: 0px; display:block; padding-top:50px; line-height:1.8em; }
    nav#mainmenu { margin:0 0 50px 0; text-align:right; position:relative; padding-top:50px; width:100%; }

    And my website:
    https://www.fortunink.com/test/tworkshoppe/

    Please tell me there’s an easier way! Much appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi sfortune,

    Make these CSS changes:

    #logo {
    float:left; <- ADD
    position:relative; <- CHANGE
    left: 0px;
    display:block;
    padding-top:50px;
    line-height:1.8em;
    }

    .

    (@techievous)

    I assume that we start with the default CSS (the default provided with the theme, before your edits).

    @media screen and (min-width: 769px) {
  #logo {
   float:left;
  }

  nav#mainmenu {
   float: right;
   text-align: right;
   margin-top: 65px;
   width: 70%;
  }
}

    Screenshot: https://i.imgur.com/xoGTuby.png

    If your menu is too long, it’ll break into 2 lines due to lack of space (because now the menu has to share space with the logo as well, on a single line).

    When the screen become smaller than 769px, it automatically revert back to default styles. This ensure the site’s responsiveness.

    Thread Starter sfortune

    (@sfortune)

    Thanks to you both for the quick response!!!

    After hours of frustrating tries on my own before I reached out for help, the second one (Techievous) worked like a charm.

    However in Internet Explorer (I’m using IE8) it is on top in the centre (its default position)… I’m guessing because @media isn’t interpreted in IE… is there a fix in CSS for IE?

    Appreciate the help – thanks!

    .

    (@techievous)

    IE8 and below doesn’t support @media queries. However, it should work with IE9 and above.

    Microsoft itself has stop supporting Windows XP and its software versions, including IE8, since April 8, 2014. We have no reason to support it; I’m sorry but you’re on your own on that one. If you fancy digging around, you can look into Respond.js or IE’s conditional commenting system.

    Thread Starter sfortune

    (@sfortune)

    I haven’t figured it out just yet but am working on it… IE is always so annoying!

    Appreciate the response though, thanks again guys.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change position of logo to left of navigation’ is closed to new replies.