From the course: SharePoint 2019: Customizing with Themes and CSS
Modify site navigation placement - SharePoint Tutorial
From the course: SharePoint 2019: Customizing with Themes and CSS
Modify site navigation placement
- [Instructor] Now there's one more trick that I want to show you with navigation that can make a major impact on your site's overall look and feel. We're going to change the placement of the navigation bar when it is the Oslo style and move it up to the top of the window in this example. You know my usual speech about making sure you have a good reason for doing all this extra work. I'm going to share a reason for this particular task. The fact is some organizations have had well, they're a bit biased against SharePoint due to bad experiences with older versions or purely constructed sites. In one particular case, it was enough of an issue that people thought it was best to lose the SharePoint branding entirely. Now, here we've got a couple of caveats. Caveat number one, there is a fair amount of extra work here because of the way SharePoint is evolving towards their new look and feel. And because of the way SharePoint periodically updates SharePoint Online, I can't guarantee you that your site settings won't get overwritten. You may find yourself having to repeat your site setting changes from time to time. And this is a bit problematic on modern experience pages and sites. If you want to do this site wide, it really works best with a classic experience site. Let me show you something funny. Let's walk through this whole process. Now, since I've already shown you how to find CSS and check elements a couple of times, I'm going to take some shortcuts and just tell you which codes we're adjusting. The finished CSS for this video is available in the Exercise Folder too. Look for modified_style_02_05. Let's turn on the developer tools and using the pin pointer, we're going to click the menu bar here and you'll see we've got this area here, ms-core blah, blah, blah, blah, blah, zzz, et cetera, et cetera, et cetera. I actually think this one here is the one that we want, so I'm going to double click here and I'm going copy this and I'm going to add a rule. Notice that when I started a rule rather than putting in the class information that I had copied, it put in the ID instead. What I want to do is I want to just remove that and go ahead and paste in what I had copied but I want to take out this bit here and I want to start it with a period because this is a class, so this is want we're going to do. And now we'll start going in here. First thing I'm going to do is change the background-color and I'm going to change it to something a little noticeable, burlyWood, that's a interesting name for a color and I'm going to make this Important. Okay, so there's the color that we've got. Now, I want to move the navigation bar from where it is up to the very top of the page. So, what I'm going to do is I'm going to say position is fixed and I'll make that Important. Once again, we're probably making everything important, so just get used to that idea. Now I'm going to set the position, the top of the position is going to be zero pixels. That will be at the top of the page, that's zero pixels, not O pixels and we'll make that important. And see how the bar has moved up to the very top of the page. That's good, we're on the way. Now let's also say left is going to be zero pixels and make that important as well. It's up at the top of the page and it's pushed over all the way to the left. That's good, that's where we want it to be. It covers part of the bar. We want it to cover all of the bar and what do we need to do about this? The width is a little bit tricky because over on the right of the SharePoint menu bar is the Help prompt and the gear icon for getting to the various settings and we don't want to cover those up. We need to allow some room. So, what we'll do is we'll make the width a percentage, we'll make it variable, we'll say that the width is 60% and of course we'll make that important. See now that's spread out for a bit but it doesn't cover everything. That's good, it's going to leave us that other bit. Comes over part of the way, doesn't cover the whole thing, great. If you were looking at this without it being a maximized window, it would still size itself appropriately, so this is a very good place to start. Now, there's an obvious issue, the stock bar beneath is a different color, so let's figure out what that element is and then we'll change that too because we don't want to have burlyWood 60% and black the other 40%. We'll use the pin pointer and we'll just highlight this bar and we have nav-centerAlign. Actually I believe what we want is just NavHeader. So, I'm going to cheat, I'm going to go ahead, add a rule and save it, it is 0365_NavHeader because I know that's the right one. Actually, I think there's a class for this. Let's use the class instead, 0365_NavHeader. By the way, if I haven't mentioned this already, these are case sensitive which is odd but for typing in classes and IDs, you have to get that absolutely right. And don't worry because I will giving you all of these codes in the class files as well. We've got NavHeader and let's see, let's go ahead and change the background color here to burlyWood. Ah, there, there we go. You can see that's already changed itself. Now, it didn't change the bell, the gear, the help icon and it didn't change over on the other side where the Office 365 button is. Those are separate elements. We have to deal with those things separately. I'm not going to bother in this particular exercise 'cause I think you'll get the idea. Our next job is to make the nav bar tall enough to cover the SharePoint bar completely, so let's set the height attribute on that to 50 pixels. Trust me, I know that that's the right height. We need to find this rule that we were working on again, so I'm going to click the pointer and this is the bit right there and see, it'll take us back to this here. So, now we need to say height is 50 pixels. There and you see it's covered all of that completely. Now, I want to change one more thing. How about we make the background color on the menu items change when you float over? Because right now is we took out all those other changes we had before. Right now there's no change when you're floating over something. So, we'll use the same method that we did before and we'll go for menu-item-text which is what we used before, copy that and create a new rule and we'll use the sudo class hover, background-color is lightgray. Now, when we float, you can see that that changes and that's much better. I think that's a much better experience. We're making this easier for the user who is going to be trying to navigate on this site and that as I've said before is really the most important thing. That's why we want to make these more elaborate changes. And also, don't forget, none of these change hold until you add them to your style sheet and as I mentioned before, I do have the complete code for this in the class files. Look for modified_style_02_05.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Browser developer tools2m 41s
-
(Locked)
Knowing what CSS elements to change3m 17s
-
(Locked)
Modify site navigation fonts and backgrounds8m 15s
-
(Locked)
Modify site navigation widths and drop-down menus5m 56s
-
Modify site navigation placement9m 23s
-
(Locked)
Challenge: Modify the navigation font and background colors2m
-
(Locked)
Solution: Modify the navigation font and background colors2m 43s
-
(Locked)
-
-
-
-
-