I need to change top navigation menu font size in Sharepoint 2016

Hi all!

About Sharepoint 2013 & Sharepoint 2016:

I need to change top navigation menu font size.
I'm very novice in Sharepoint and I understand I have to use Sharepoint Designer 2013 to change maybe Oslo.html or some css files.
Please tell me what is the easiest way to change that font size on the top menu?
I would like to have exact information what to do and how and where. Thanks in advance!

-Juha
RimFire007Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
Hi, show us how your menu looks like in your code.
RimFire007Author Commented:
Where is that code you need?
I use standard Oslo for our intranet.
Zakaria AcharkiAnalyst DeveloperCommented:
Could you please take a screenshot and show us where is the menu you want to change.
Maximize Customer Retention with Superior Service

The IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more to help build customer satisfaction and retention.

RimFire007Author Commented:
Here is intranet top navigation menu attached (intratopmenu) and also a file view from Sharepoint Designer.
The navigation menu starting with text "Etusivu" is in Finnish.
As you can see the font is very small. I need to have it much bigger for the intranet users.
I've made a copy of Oslo.html and oslo.master just in case I need to make changes to the original html file.
Intratopmenu.png
Designerfileview.PNG
RimFire007Author Commented:
Same kind of problem has been here: https://social.technet.microsoft.com/Forums/lync/en-US/60ffd428-ec86-4d32-9f54-522dd14b38e5/top-link-bar-change-font-size?forum=sharepointgeneralprevious 
I have not used IE Dev Tools so I don't how to do such a trace css source.
Or is there more clever way to do this fix?
Zakaria AcharkiAnalyst DeveloperCommented:
You could use the same technique by placing the mouse on one of the top menu items then click the mouse right button and choose the inspector or the examine option, it will open the developer tool and shows if which file the CSS is stored and which line, like :

qqqScreenshot_7.png
RimFire007Author Commented:
Thanks for advice - I'll try it on wednesday. Meanwhile - happy new year! :-)
Zakaria AcharkiAnalyst DeveloperCommented:
Happy new year bro, glad I could help.
RimFire007Author Commented:
Hi again!

I tried to find the proper file by hovering on the right line but it doesn't tell me any file name.
You can see that if I change the font-size from 12 to 20 the navigation menu is more readable.
How can I see the file name over here?
InspectorCodeOriginal.PNG
InspectorCode_changed20px.PNG
NavigationMenuBigger.PNG
Zakaria AcharkiAnalyst DeveloperCommented:
Yes I see, the inline keyword mean that the CSS rules add added in-page so you need to go to the current page head section at the top of the page then search for .link-113 { ... } and change the font size there.
RimFire007Author Commented:
I went to head section and tried to find anything about .link-113 but almost everything there is nested links. So I found nothing with "Find".

About my case to fix font size: this link says my case is doomed unless I do custom css rules: https://sharepoint.stackexchange.com/questions/230061/sharepoint-365-add-custom-css-to-modern-pages
I use only Modern (Sharepoint 2016) Pages on my intranet. Can it be so hard just to adjust one font size in Sharepoint?
Zakaria AcharkiAnalyst DeveloperCommented:
Ok try to add this part inside your head section :

<style>
  .ms-HorizontalNav .ms-FocusZone .ms-HorizontalNavItems .ms-HorizontalNavItem a.ms-HorizontalNavItem-link{ 
       font-size:20px; 
  }
<style>

Open in new window


That is a custom CSS rule.
RimFire007Author Commented:
Etusivu.aspx is my starting page for intranet. Should I put your script there?
Should your last <style> be infact </style> ??
Zakaria AcharkiAnalyst DeveloperCommented:
Yes just try it.
RimFire007Author Commented:
I've tried your solution and also following ones from other sites:
#top .main_menu ul.menu li > a {
font-size: 20px;
}
#top .sub_menu ul.menu li > a {
font-size: 16px;
}
 and
.main_menu ul:first-child > li > a { font-size: 20px; }

No use.
Any of them does not work on master page or starting page.
Nor any changes to master pages work.
Altering css files doesn't work.
Any suggestions why every single one of them fails to alter default view or start page?
Walter CurtisSharePoint AEDCommented:
Make sure you checkin the masterpage or other files you are working on as well as publish them.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.