SharePoint Online development: modifying site navigation widths and

Blog link: https://blog.51cto.com/13969817

In terms of personal preferences, I prefer SharePoint's Olso style, with the navigation bar at the top, but it would be perfect if some of my new pages were shown in the navigation drop-down menu. So how can I improve this experience?

Ideally, I want each item in the drop-down menu to be on one line. Let's look at the navigation with the drop-down menu. You can see that there is a class: dynamic, double-click and copy it, and then add a rule under the right style tab. We can set the width to a specific pixel width or we can set its width to auto, so it can be automatically set according to the size of the screen. I think we need to add Important because this is an important rule, and we don't need to change lines yet.

Add the Rule under the Style tag, sample code:

.dynamic {

Width: auto! important

White-space: nowrap! important

}

Let's take a look at the effect. By expanding the drop-down menu of navigation, we can see that the text in the link is displayed on one line, and the effect is very good. If you want to keep it permanently, you need to copy this rule, then paste it into the stylesheet and save it. This will permanently use this rule.

What if we have multiple links in the navigation drop-down menu, what if we want to add some space between the submenu items?

Let's continue to add a rule to the dynamic class:

Add the Rule under the Style tag, sample code:

.dynamic li {

Padding: 5px! important

Border-top: 2px solid lightgrey! important

}

Let's take a look at the effect, expand the navigation drop-down menu, the link is displayed in the form of a border, the effect is good.

In order to keep these changes permanently, we made the corresponding changes in the stylesheet and saved them: