• Resolved daddybo

    (@daddybo)


    Is it possible to have a small png logo file at the leftmost position on the primary menu? How to do it?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    Sorry for late reply…I updated my MS Outlook and I didn’t know it took out my RSS feeds.

    You could do that, but it’ll require some custom CSS that relates to pseudo elements like this selector :before

    You can read more about how this is done for a variety of content, such as images: :before

    Please be aware though you will have some additional CSS coding to achieve this. For example, the :before selector would be added to your first menu item, but you need to find out what your first item’s ID is. If we look on the live demo for senses Lite, you will see this:

    <ul id="menu-primary-menu" class="nav-menu">
    <li id="menu-item-165" class="home menu-item menu-item-type-custom menu-item-object-custom menu-item-165">

    The first item has an ID of “menu-item-165” applied. So to add an image using the :before selector, it would look something like this:

    @media (min-width: 992px) {
    .main-navigation ul.nav-menu li#menu-item-165:before {
        content: url(smiley.gif);
    }
    }

    You will more likely have to use a full URL for your image though instead of the relative sample shown. You will notice that this is also applied to screen sizes from 992px, which means on smaller screens, your image won’t show.

    Thread Starter daddybo

    (@daddybo)

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Use a small logo png image on the menu bar’ is closed to new replies.