Logo in navbar – problem on mobile devices

  • kacper3355

    (@kacper3355)


    10 years ago

    Hello.
    I’ve got a problem with the logo in navbar. On the computers it looks like it should.
    Here’s my site – https://sdgr.pl/ – as you can see, logo looks awesome.
    I put the image in the navbar by using this code:

    li#menu-item-1735 a {
  display: block;
  background-image:url('mylogo.png');
  background-repeat: no-repeat;
  width: 125px;
  height: 20px;
  text-indent: -9000px;
}

    The problem begins on the mobile devices.
    Here’s the screen how it looks right now – https://i.imgur.com/R6AtzbO.png

    It should be like this – https://i.imgur.com/mnbfSYS.png (the search box icon must be moved to the right) or like this – https://i.imgur.com/QoZgmWr.png. I prefer the first option, but i will be glad if someone can help me with any of these versions. Best regards, i hope someone will find some time to help me solve my problem.

Viewing 2 replies - 1 through 2 (of 2 total)
  • bdbrown

    (@bdbrown)

    Hi kacper. I don’t have a technical answer but just taking a guess here. Seems like the way the site currently displays on the smaller mobile device would be normal. The code doesn’t know that the logo is anything other than an item in the topbar menu. Since that menu is compressed on devices less than 720px wide, the logo is included and ends up at it’s current position as the first item on the menu. Not to say that there isn’t a way to change that, but I don’t know how.
    I also grabbed a copy of your logo, put a link item in my topbar menu, added your (modified for my site) css, and then ran some tests using responsivetest.net. On a simulated iPhone 4, when I first expanded the menu, the logo area was blank as you indicated. It’s still active since a click event refreshed the home page. I then went to another page and then expanded the menu. This time the logo was displayed. However, it disappeared on the hover event, but again, was still active on click. When I went back to the home page, the logo was blank again. Strange indeed. But, it gets even stranger. I went back and changed the menu link to a site other than the one I was working on. Back to the responsive test. This time, the first time I expanded the menu, the logon was there. It still went dark on the hover, and it was still active on the click event. Very strange.
    At this point I thought why not play around with the css. I changed the menu link back to the actual site. After a few unsuccessful trials of changing different items on the css I finally decided to take out the anchor tag. And bingo, it worked. I also adjusted the width to 250px and the height to 37px (height of the menu item bar) but the logo is still cut off at the bottom. I also ran it on an actual iPhone 4 and it worked there as well.
    So, maybe that’s a fix. Give it a shot and let me know if it works for you.

    Thread Starter kacper3355

    (@kacper3355)

    Hello. Thank you for your response. I tried that what you suggested, but sadly, without any changes. I think i figured out how to fix it. My logo is just a replaced link in menu (menu-item), so i think that’s the reason why logo isn’t showing up on mobile devices. Does anyone have any suggestions, how to apply logo in topbar without using “menu-item” attribute?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Logo in navbar – problem on mobile devices’ is closed to new replies.