css of navigation position

by KPOP January 12th 2021, 9:41 pm

hi there

so i have accepted the fact others told me it is not possible to have the navigation and toolbar be responsive
and i also accept the fact i may not be able to position certain things at the top, toolbar and nav, in a way it looks in a certain aligned way with all resolutions available

BUT
for the life of me
i cannot figure out and i have tried a lot
what css coding do i apply in the css sheet
to get the damn navigation bar just in the center of the toolbar?
at least it would look more decent that way unlike it is right now, in some random ugly position that makes no sense
https://kpopinyourarea.forumotion.com/

i do not want to achieve it with padding or going ; margin-left or margin-right
doing that will later on make no sense anymore if you view the forum on a less bigger screen than mine right now, then it will only be center on big screens and not small screens, right?
i want css coding that makes it center on all screen sizes

thank you so much

by **SLGray** January 13th 2021, 2:42 am

Code:: .headerbar ul.navbar.navlinks { margin-left: YOUR NUMBERpx; }

by tikky January 13th 2021, 11:33 am

Hello @KPOP,

Add in your stylesheet (CSS) this code:

Code:: .navbar.navlinks { margin-left: auto; margin-right: auto; width: 80%; display: flex; align-items: center; justify-content: center; }

by KPOP January 13th 2021, 1:54 pm

pedxz wrote:Hello @KPOP,

Add in your stylesheet (CSS) this code:
Code:
.navbar.navlinks { margin-left: auto; margin-right: auto; width: 80%; display: flex; align-items: center; justify-content: center; }

@pedxz
thank you for wanting to help
i tried your css, did not work to get it into center, it did move it but did not centered it
also, when the width is too big, it somehow even blocks the ''welcome username'' disabling the link and menu you get when clicking that

when it is on 80% width on my screen its more on the right side of things
and when i made it into 68% its center but not on my smaller laptop screen

i got a 1920x screen and a laptop of 1366x
is it possible to get it somehow in center no matter what the screen size is?

by Niko January 13th 2021, 1:58 pm

Dear @KPOP

I tried the css given by the user, and I don't see any problem on my side, no matters what the resized screen is Embarassed

Do you mind providing us some screenshots of what you see and what the problem seems to be?

KPOP wrote:is it possible to get it somehow in center no matter what the screen size is?

Of course we can do that, we can have different CSS that adapts according to the screen size using the CSS @media rule thumright

but before that, I need to understand what you noticed that was wrong :rose:

by KPOP January 13th 2021, 3:36 pm

Niko wrote:Dear @KPOP

I tried the css given by the user, and I don't see any problem on my side, no matters what the resized screen is
Do you mind providing us some screenshots of what you see and what the problem seems to be?

KPOP wrote:is it possible to get it somehow in center no matter what the screen size is?
Of course we can do that, we can have different CSS that adapts according to the screen size using the CSS @media rule

but before that, I need to understand what you noticed that was wrong

thanks for helping me out so much, what a nice person

@niko

here is how the css looks like on my screen
css of navigation position C1ns

i checked it on my smaller laptop screen
not center either

and yeah i thought it should be possible but i am struggling like a B
probably due to the css that was applied to get the navbar into the toolbar space
so i was like WTF xD

by **TheCrow** January 13th 2021, 4:12 pm

@KPOP,

Try adding this javascript in your forum. This will add those two links after your navigation bar links. But I'm not sure how they will open though.
Name: Anything you want
Placement: In all the pages
Code:

Code:: $(function(){ $(function(){ $(function(){ $('#fa_menu').appendTo('.navlinks'); $('a.rightHeaderLink').appendTo('.navlinks'); $('#fa_right #fa_notifications').appendTo('#fa_menu'); }); }); });

Should work.

Regards,
TC.

by KPOP January 13th 2021, 7:57 pm

TheCrow wrote:@KPOP,

Try adding this javascript in your forum. This will add those two links after your navigation bar links. But I'm not sure how they will open though.
Name: Anything you want
Placement: In all the pages
Code:
Code:
$(function(){ $(function(){ $(function(){ $('#fa_menu').appendTo('.navlinks'); $('a.rightHeaderLink').appendTo('.navlinks'); $('#fa_right #fa_notifications').appendTo('#fa_menu'); }); }); });

Should work.

Regards,
TC.

@thecrow
oh wow that would be wonderful, if i could merge the two together into one thing
things could look a lot better then in my opinion

i added it, it worked but not fully
the welcome username is not clickable anymore and the notifications window pops up elsewhere and not underneath it
such ashame
Crying or Very sad

but thanks for trying

by **SLGray** January 13th 2021, 10:45 pm

Have you looked at the AwesomeBB version? It might suit what you want.

by **TheCrow** January 14th 2021, 8:09 am

@KPOP,

Try replacing the script from before with this one:

Code:: $(function(){ $(function(){ $(function(){ $('#fa_menu').appendTo('.navlinks'); $('a.rightHeaderLink').appendTo('.navlinks'); $('#fa_right #fa_notifications').appendTo('#fa_menu'); $('#fa_menu').on('click',function(){ $('#fa_menulist').toggle(); }); }); }); });

and then add this css which you can change the positions to your liking.

Code:: #notif_list {top:182px!important} #fa_menulist { top: 80px!important; width: 349px!important; }

Regards,
TC.

by KPOP January 14th 2021, 1:28 pm

@slgray
what do you mean?
is it standard the navigation bar and toolbar into 1 thing where it is auto center?

@thecrow
css of navigation position C1ns

the new coding made it look like this
plus the menu that pops up when you click ''welcome username''
was not below it but stuck partly on the right side of the screen, did not see it fully

by **SLGray** January 14th 2021, 9:23 pm

Go to Hitskin and look at the demos of the AwesomeBB skins/themes. On that version, the navbar is in a slide in menu.

Here is One Demo: https://demo.forumotion.com/forum?theme_id=217053