Styling Menu's to look the same Upfront > Store Front

Hi, Im using two themes on my site.
http://www.domain.com with upfront
and sub.domain.com with storefront

Currently i have the main domain menu looking great, but i want the storefront theme's menu to match the style / look that i have on the main site. How can this be achieved?

Main site - http://tinyurl.com/p9hmc7d - menu - http://take.ms/iRv7J (use this style)
subdomain - http://tinyurl.com/ounlhnf - menu - http://take.ms/H3He6 (change this menu style with main site)

Both sites have support Access open till 18th

Thanks

Tom

  • Milan

    Hi @Tom,

    I hope you are having an awesome day.

    First of all thanks for give support access.

    Please try this css code snippet.

    #masthead .main-navigation ul.menu > li > a{
        padding: 6px 20px;
        text-decoration: none;
        padding-bottom: 15px;
        font-family: "Quattrocento";
        font-size: 22px;
        text-rendering: geometricPrecision;
        font-style: normal;
        font-weight: normal;
        border: none;
    }

    This snippet will target sub domain site's menu. You can paste this css code to stylesheet of theme but as it will not preserve your changes when theme gets updated. So I suggest you to paste this code to custom css editor supplied by theme or you can use this plugin for handling custom css.
    https://wordpress.org/plugins/simple-custom-css/.

    I hope this helps you Tom.

    Please let me know if there is anything else I can help you with..

    Enjoy Wpmu-dev..

    Kind Regards,
    Milan.

  • Tom

    Hi Milan,

    Thanks for your reply
    I see the font changed but is it possible to get the menu looking more like the main site one? - http://take.ms/XmIWo and with the same visual effect when hovering over the buttons?

    Also would you mind removing the domain link from above - http://take.ms/gbw3f ( i dont want google to index any of my wpmudev sites /threads as it creates issues when client searching for those domains)

    Thanks

    Tom

  • Milan

    Hi @Tom,

    Please try out this css snippet and remove previous one,

    #masthead .main-navigation ul.menu > li > a{
            padding: 6px 20px;
            text-decoration: none;
            padding-bottom: 15px;
            font-family: "Quattrocento";
            font-size: 22px;
            text-rendering: geometricPrecision;
            font-style: normal;
            font-weight: normal;
            border: none;
        }
    
        #masthead nav#site-navigation{
          width: 70%;
          float: right;
          display: inline-block !important;
        }
    
        #masthead a.site-logo-link{
          display: inline-block;
          width: 20% !important;
          float: left !important;
          margin-bottom: -52px;
        }
    
        #masthead div.col-full{
          margin-bottom: 15px;
        }

    I think this css snippet will give your sub domain site menu same look as your parent theme menu. Menu animation like upfront is not possible with storefront as it requires both css and custom javascript. But if you want to change menu look when user hover over the menu you can write your css rules here for that behaviour

    #masthead .main-navigation ul.menu > li > a:hover{
       //Write you custom css rules.
    }

    And sorry for url mention, I've just removed url from my previous post you can confirm that.

    Please let me know if there is anything else I can help you with.

    Enjoy Wpmu-dev.

    Warmest Regards,
    Milan.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.