static sticky with top bar or header options

Question

HI, I was playing around with the header options. I lean toward two options, but none of them are standard in the theme.

Option 1: top bar with the static sticky header.
I put together this header, but I see some issues. When scrolling I see an added white space above the slider. Also the logo position in the mobile view is incorrect. Instead of staying on the same level as the pancake and search icons, it is displayed below, thus creating a very tall header, which on smaller screens takes way too much space.

Option 2: instead of using the top bar, I was wondering if I could use the header extras (for example as in the demo-construction theme) but on the static sticky header.

URL: http://pz.icarteam.us/index.html

Your help is highly appreciated!

SemiColonWeb · Accepted Answer

Hello, 1. When using the Top bar on your Page, the .slider parallax inner cannot be used. So simply delete the .slider parallax inner DIV and move all the contents inside, directly within the slider Area. Additionally, you seem to be using the Top Bar incorrectly with no .container DIV, which is causing the Columns to not exit properly. To fix this, add the .clearfix Class to the top bar DIV and the issue with the Logo will also be solved. 2. Unfortunately, this is currently not supported and w…

akhundov · Answer

Thank you very much for the detailed response!
I followed your tips and fixed the slider and added the .container to the top bar. However, this breaks the way I wanted to see the site display the top bar. Is there any trick to make the top bar both work correctly and be displayed full width at the same time?

Semicolon Web · Answer

Hello,

You can simply consider using the .container-fluid or .container-fullwidth Class instead of the .container Class.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

akhundov · Answer

Hi! I tried both. Container fullwidth leaves some padding on the sides, while container fluid works perfect. I went with the fluid version. Thank you!

Semicolon Web · Answer

Hello, Really Glad that your issues were resolved. Do let us know if we can help you with anything else or if you find any further issues with Canvas.