css of navigation position

Go down

In progress css of navigation position

Post by KPOP on January 12th 2021, 10: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
KPOP
KPOP
Forumember

Female Posts : 71
Reputation : 3
Language : dutch

View user profile https://kpopinyourarea.forumotion.com/

Back to top Go down

In progress Re: css of navigation position

Post by SLGray on January 13th 2021, 3:42 am

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


css of navigation position Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 48694
Reputation : 3403
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: css of navigation position

Post by pedxz on January 13th 2021, 12:33 pm

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
pedxz
Forumember

Posts : 410
Reputation : 108
Language : 🇵🇹

View user profile https://www.forumotion.com/create-forum/modernbb

KPOP likes this post

Back to top Go down

In progress Re: css of navigation position

Post by KPOP on January 13th 2021, 2: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?
KPOP
KPOP
Forumember

Female Posts : 71
Reputation : 3
Language : dutch

View user profile https://kpopinyourarea.forumotion.com/

Back to top Go down

In progress Re: css of navigation position

Post by Niko on January 13th 2021, 2: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:
Niko
Niko
Hyperactive

Male Posts : 2314
Reputation : 102
Language : English, French, Italian, Spanish, Latin

View user profile

TonnyKamper and KPOP like this post

Back to top Go down

In progress Re: css of navigation position

Post by KPOP on January 13th 2021, 4: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 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:
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
KPOP
KPOP
Forumember

Female Posts : 71
Reputation : 3
Language : dutch

View user profile https://kpopinyourarea.forumotion.com/

Back to top Go down

In progress Re: css of navigation position

Post by TheCrow on January 13th 2021, 5: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.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6598
Reputation : 766
Language : Greek, English

View user profile https://forumote.forumotion.com

KPOP likes this post

Back to top Go down

In progress Re: css of navigation position

Post by KPOP on January 13th 2021, 8: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
KPOP
KPOP
Forumember

Female Posts : 71
Reputation : 3
Language : dutch

View user profile https://kpopinyourarea.forumotion.com/

Back to top Go down

In progress Re: css of navigation position

Post by SLGray on January 13th 2021, 11:45 pm

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


css of navigation position Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 48694
Reputation : 3403
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

KPOP likes this post

Back to top Go down

In progress Re: css of navigation position

Post by TheCrow on January 14th 2021, 9: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.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6598
Reputation : 766
Language : Greek, English

View user profile https://forumote.forumotion.com

KPOP likes this post

Back to top Go down

In progress Re: css of navigation position

Post by KPOP on January 14th 2021, 2: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
KPOP
KPOP
Forumember

Female Posts : 71
Reputation : 3
Language : dutch

View user profile https://kpopinyourarea.forumotion.com/

Back to top Go down

In progress Re: css of navigation position

Post by SLGray on January 14th 2021, 10: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


css of navigation position Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 48694
Reputation : 3403
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum