The Portal web templates are architected so that the Logo and menu bar are defined in the Header of the Portalweb site. If the logo 'bleeds' below the menu it can interfer with the breadcumb for more standard resolutions. The breadcrumb is defined in various web template associated with each web page which typically refer to the Breadcrumb snippet.
One quick solution is to edit CSS styles referenced by the Breadcrumb snippet so it adjusts some padding.
CSS styles are defined in the bootstrap.min.cs file and in the theme.css file. They can also be added to each individual portal web page (under Advanced Settings). In our scenario, best to edit the theme.css file as the relevant CSS styles will apply to all web pages without having to edit each page.
Add a few entries into the theme.css file in the root folder of the portal as follows:
- Download the theme.css file from the root folder of the portal web site
- Add the following entries to this local theme.css file replacing the pixel sizing to what is appropriate:
- .page-heading { padding-top: 40px !important;}
- Find the entry:
- Add to the bottom of the entry...
- Upload the local theme.css file overriding the existing one
- Refresh the portal page (potentially several times; clear cache if needed)
If you are looking to understand what these changes do, open a portal page and right-click the breadbrumb and select Inspect to open the developer view. The breadcrumb element should be highlighted but I find searching for the element in the Elements pane the fastest. In the case of the web page, search for 'page-heading'. Click the element 'page-heading' and notice it is highlighted on the page itself. If you haven't yet updated theme.css, add the entry to the class and note the change to the page. Experiment to get the exact look you are looking for! Once you do, update theme.css as desired.
You may find that other elements 'below' the elements that were changed have been shifted (in particular the 'layer_down' graphic overlay to the background image of the section-landing object). This is the time one has 'fun' in making it all work out! Enjoy.
