Seeking help with the design

Harshavardhan wrote:
Ok, just now I did that and guess what happened?

The navbar returns to the top and the problem comes back. This defeats Draxion's solution which was helping until now. Plus, when checking CSS stylesheet, still it's blank except with my additional codes on.

Do I need to keep like this? This is not helping.

skouliki wrote:we are not magicians
we are trying to find a solution by testing many things

one code is added which make your bar sticky
that code is usually in :
css / if your css sheet is empty that means no codes ar added so its ok
java
templates

we are just volunteers that trying to help you , we have many threads per day so please be patient
if you think Draxion's solution is solved your issue then mark your thread as solved

Code:


.is-sticky#headerbar-top { 
    position: absolute !important;   
}



skouliki wrote:can you add this to your css sheet and save please

Code:


.is-sticky#headerbar-top {  
    position: absolute !important;    
}



Code:

.is-sticky#headerbar-top { 
    position: absolute !important;
    display: none;
}


skouliki wrote:to that code i gave you add this display:none;

so the code will be like this

Code:

.is-sticky#headerbar-top {  
    position: absolute !important;
    display: none;
}


skouliki wrote:this is not about the logo this code is about the navbar

lets try to fix one thing at a time

if you keep adding things then the elements i investigate changes all the time and i keep getting different results

is the navbar completed?

Code:


.navbar a {
    background-color: grey;
}


skouliki wrote:this code is about making the navbar grey

Code:


.navbar a {
    background-color: grey;
}


skouliki wrote:if you make the background white the icons that are white will not be visible (they are white before the hover)

Code:

.navbar img {
      filter: invert(0%); }
.navbar a {
    background-color: white;
}


skouliki wrote:

Code:

.navbar img {
      filter: invert(0%); }
.navbar a {
    background-color: white;
}


try this and delete the previous grey code

Code:


.navbar a {
    border-radius: unset;
)


skouliki wrote:

Code:


.navbar a {
    border-radius: unset;
)


skouliki wrote:the icons to change when hovering or the background?

Code:

$(document).ready(function() {
  var navbar = $("#headerbar-top > div > ul"),
        header = $(".headerbar");
  navbar.insertAfter(header);
});


Draxion wrote:Because you found a solution to the sticky function, I recommend replacing that script I gave you with this. This will only bring down the navbar below the header.

Code:

$(document).ready(function() {
  var navbar = $("#headerbar-top > div > ul"),
        header = $(".headerbar");
  navbar.insertAfter(header);
});


skouliki wrote:

Code:

.navbar img {
      filter: invert(0%); }
.navbar a {
    background-color: white;
}


try this and delete the previous grey code

skouliki wrote:

skouliki wrote:

Code:

.navbar img {
      filter: invert(0%); }
.navbar a {
    background-color: white;
}


try this and delete the previous grey code

to make the icons to the grey that you want , just change the invert(0%) value from 0 to whatever example 50%
the 100% is total black

The tiny problem still persists - when you scroll back to the top, the logo/banner shakes a bit for a few seconds.

Code:

.navbar img {
      filter: invert(0%);
}


Code:

.navbar img {
    -webkit-filter: opacity(.5) drop-shadow(0 0 0 #404040);
}

skouliki wrote:

The tiny problem still persists - when you scroll back to the top, the logo/banner shakes a bit for a few seconds.

i cant see this using chrome

i dont think you can change them using css cause they are icons (not Font Awesome icons)

the best think i can think is this
replace the code

Code:

.navbar img {
      filter: invert(0%);
}


with this

Code:

.navbar img {
    -webkit-filter: opacity(.5) drop-shadow(0 0 0 #404040);

for the hover icon color iam not sure

skouliki wrote:you didnt put the }
at the end of the code

skouliki wrote:then i dont know..return to the previous situation and maybe another member with more coding skills can help you on this

if i found the solution later i will post