Sticky navbar line – new website


#1

Hi everyone, my website is almost ready: http://www.stefcon.net/index.html. At the moment there is only the English version online and I would be very happy if you could give me feedback, especially regarding the view on mobile devices. Please feel free to say your opinions. In addition, there is a problem with the navbar’s thin line. When scrolling I would like to let it expand over the whole width of the browser’s window or being hide (see attached screenshots).


#2

Hi @Steeve

You can add the following piece of code to the Project Header settings which you find under the Menu Window -> select Code Editor. This will hide the line once the sticky is activated and you scroll down.

<style>

.sticky-nav.sticky .x-3-nav-bar{
	box-shadow:0px 0px 0px #9A9CA6;
	border-style:solid;
	border-color:#000000!important;
	margin-top:-1px;
	border-width:0px 0px 1px 0px;	
}

</style> 

MDS


#3

On the sticky you need to add the border and remove it from the nav-bar

Add this code:

.fill-bloc-top-edge.sticky {
         border-bottom: #70717B;
         border-bottom-width: 1px;
         border-bottom-style: solid;
}

.x-3-nav-bar {
        border-width: 0px 0px 0px 0px;
}

Good luck.


#4

Thanks :slightly_smiling_face: I think, a hidden line works best for me for now.


#5

Hi @Steeve

You’re welcome.

MDS


#6

My site does not look great on an iPhone SE or iPad Pro. I think I should adjust it individually in Blocs in terms of visibility for each MD, SM, XS, which I did, but it’s not „WYSWYG“ :frowning:


#7

Indeed there seems to be an issue everything is really tiny. You say you’ve optimized for mobile? What has been your process so far?

If you wish you can private message the bloc file and I can have a look.

MDS