Trying to do on bootstrap (e). There is a container with a background in which there are 3 rows in which logos, a button, and a group of buttons lie. Under them you need to also place a menu, for example, a standard navbar so that it would become attached to the predecessor element and when reducing the expansion of the screen (and associated with this decrease the height of the background image that) did not say how it went. Threat over all this disgrace will still be hung js which will change the height of the header, reducing it when scrolling down the page.

Tell me how to properly position the elements so that this standard navbar would “stick” to the element located above and not depend on the height of this element?

This is how it looks without a margin (s) on the normal screen. This is how it looks without a margin (s) on the normal screen. Looks like this on mobile devices. Looks like this on mobile devices.

Something should be positioned relatively on all screens Something should be positioned relatively on all screens

    2 answers 2

    Specify the parameter display: inline or display: inline-block

    • I had an error in html and the div.container was not closed, in which the whole header is in front of the menu. After that, the menu item is positioned correctly (under the container with a picture), but the result of the correction is still not satisfactory: the background has the attributes: background-repeat: no-repeat and background-size: contain; as a result, the picture is pressed in height and does not completely fill the container because of what an empty space appears above the menu - Maryen

    It's about the styles. For the element with the background was set:

     background-image: url(images/header.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: contain;

    And for the container in which the elements lie, including the background, the height was set:

     height: ##px

    When setting background-repeat: no-repeat and background-size: contain; it is impossible to additionally set the size of the container in which all this will lie otherwise changing the page will change the size of the header and as a result, empty space is created. The only thing I don’t understand is why it is when specifying background-size: contain the background image does not occupy the entire container provided to it.