Full width header at startpage like as homepage of bootstrap package with menu overlay?

[sputniklunar]

Hi there again! Does anyone know how to set up a header image to be in the top of the homepage (like at the official homepage of bootstrap package) with the menu being always displayed while scrolling? I have no found an option to do it. I guess I have to set up a second logo image for that too, but also could not find that. Thanks!

[pstranghoener]

Hi,

in your TS Constants you have to set or edition via the options in Backend. page.theme.navigation.style = default-transition page.theme.navigation.type = top

And for Content Elements you have to use one of the Carousels.

Best Regards Philipp

[sputniklunar]

Hey @pstranghoener, thanks for your reply! But wouldn't be all the header/navigation for all pages set up that way?

[pstranghoener]

Than do

[treeLevel = 0] page.theme.navigation.style = default-transition page.theme.navigation.type = top [end]

[sputniklunar]

That worked well, thank you! Do you maybe also know, how I get the header image displayed full width and started at the top of the page? I don't know in what content element I have to set this. If i use it in border, it is shown full width, but its still underneath the navigation and not starting at the top of the page.

[pstranghoener]

Its Carousels Fullwidth and you have to set No Border in the Appearance Tab.

[sputniklunar]

Thanks!

[sputniklunar]

Does anyone know how to change the color of the linked menu items from white to black? I couldn't find the CSS class for the inverted links/menu.

[rumpfwerk]

you can analyse such things by using Browser-Dev-Tools. On PC you can open them with STRG-SHIFT-I. Formatting of an acitve main-navigation-link ist done by .navbar-nav .active>.nav-link

AND

.navbar-mainnavigation .navbar-nav>li.active>.nav-link:before { opacity: 0.5; }

[sputniklunar]

Yes I've looked for that, but in the case of the inverted navigation I could not find a matching class (compared to the non-inverted navigation) in which the link color is set up.

[rumpfwerk]

I know the problem, that the inverted transition nav in nontransition state ist white on white

you can fix it by overwriting the definition, that definines .navbar-inverse-transition:not(.navbar-transition) .navbar-nav>li>.nav-link

not sure, that there is an own constant for the link-color-Setup (in different states)

[gilbertsoft]

Which level do you like to change? I guess level 1 and not the submenu...

To change level 1 you could try to add something like .navbar-inverse .navbar-nav .nav-link and .navbar-inverse .navbar-nav .nav-link:hover to your theme in your sitepackage to change the color

[sputniklunar]

I found those classes in bootstrap4-theme.css and bootstrap4-rte.css and edited the color that was set to #fff or rgb255.255.255 but I it did not change anything. I don't use the sitepackage builder yet. Is there no option set up already in the CSS? I don't know, if I'm just too blind to find it right now...

[rumpfwerk]

the advantage of a sitepackage is, that you have all overrides and changes in one place (your extension). For solving your problem it would be nice but you can use an external css for the beginning and easy success, too.

What you should not do: You edited styles in the bootstrap-package-extension and in the next update of this package this would be overwritten und you changes are lost.

[sputniklunar]

Oh, I didn't think about the last aspect, thanks for that hint! I will try to set up the sitepackage builder or an external CSS and give a feedback in the following days. Sorry, may questions may be a bit confusing, but I'm new in T3 and Bootstrap. As far as I understand, in the sitepackage builder / own CSS the classes I use will overwrite the "default" ones right?

[sputniklunar]

Do we talk about the same sitepackage? I created one using the form of @benjaminkott and installed it, but I don't see any option to set anything up in the backend (I don't see a change in the backend at all).

[rumpfwerk]

you are welcome... A short story of building CSS in bootstrap-package is the following:

• you hat some constants, you can set them in the constant-editor (e.g. the primary-color)
• there ist some scss-compiler, building css by "linking" the constants to the variables

If there is no predefined constant for your need, you have to look into the scss-code... This is a bit more comprehensiv to change things here.....

The easier way to do little changes is, to overwrite some stuff, you can not change by the constants/bootstrap-rendering, with your own css included after

Sitepackages are used to keep things for a project in some place (css, templates, typoscript, ....). In sitepackages you can e.g. define to use also your own css (by typoscript) The sitepackage does not give you more opportunities in the backend. It is only for organizing things and keep them in shape for future use (updates).

[sputniklunar]

Thanks for your help! I finally found the class and solved the problem with overriding it with an own CSS. The link color of the inverted navbar are not white anymore.