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

RimFire007
RimFire007 used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Hi, show us how your menu looks like in your code.

Author

Commented:
Where is that code you need?
I use standard Oslo for our intranet.
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Could you please take a screenshot and show us where is the menu you want to change.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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

Author

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 Developer
Distinguished Expert 2018

Commented:
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

Author

Commented:
Thanks for advice - I'll try it on wednesday. Meanwhile - happy new year! :-)
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Happy new year bro, glad I could help.

Author

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 Developer
Distinguished Expert 2018

Commented:
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.

Author

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 Developer
Distinguished Expert 2018

Commented:
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.

Author

Commented:
Etusivu.aspx is my starting page for intranet. Should I put your script there?
Should your last <style> be infact </style> ??
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Yes just try it.

Author

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 AED
Distinguished Expert 2018

Commented:
Make sure you checkin the masterpage or other files you are working on as well as publish them.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial