Fly-out Menu Master Page Edit

Question

This action I perform all the time using content editor in SharePoint 2013 version. This time I want to make the change to the master page. I want the changed to seen on every page.

What am I trying to do?

I want to increase the width the fly-out menu only on the quick launch bar.

Searching on the internet I found several options, but I want to know the best one to use. I was thinking to use the code below and put it in the header of the master page. Would this work? Any help would be helpful.

<style>
    #DeltaPlaceHolderLeftNavBar 

    .menu li.hover 
 {

   background:Red;

 }

    .menu-item
 {
     background-color:white;
     width:200px;
 }
</style>

Answer 1

While it would work to put the CSS directly in the MasterPage, this approach is not recommended.

If you have multiple site collection, you would have to upload your custom MasterPage manually to all the sites. And if you sometime further on need to change something in the embedded CSS, you would have to update every sitecollection.

I think that you should just create a simple CSS file and use upload it to the topsites style library/site assets and use Alternate CSS Url.

Or you could create a copy of the default Seattle/Oslo masterpage, rename it (never edit the default masterpages directly, always create a copy!) and add a script link in your custom masterpage that points to a local library in your site/server.

Adding CSS and JavaScript files to SharePoint 2013 MasterPage