Post by dut on Jan 18, 2024 14:15:06 GMT -8
Forum URL: (private)
Hello!
Ive messed alot around with both theme and CSS without actually knowing anything about it :-D Ive tried to create an interesting theme, for the forum user, but encountered a problem with the navbar whom I can center to match my own monitor/browser, but it wont automaticly adapt to other users. Resulting in this:
My screen (1920x1080):
another users screen (2560x1600):
how do I fix this?
Ive tried to find a way through, by searching online, but I think ive messed up quite alot in the code
So It all looke like this now:
Template:
CSS:
On line 3 the calc()-thing was an experiment, since I have two wrappers (one for the banner and menu, and one for the body/content). I thought that perhaps the "length" of the menu had to be defined by the wrappers length, for whom one is ls larger than the other.
And since I have a custom menu bar, ive also tried this way around:
Hello!
Ive messed alot around with both theme and CSS without actually knowing anything about it :-D Ive tried to create an interesting theme, for the forum user, but encountered a problem with the navbar whom I can center to match my own monitor/browser, but it wont automaticly adapt to other users. Resulting in this:
My screen (1920x1080):
another users screen (2560x1600):
how do I fix this?
Ive tried to find a way through, by searching online, but I think ive messed up quite alot in the code
So It all looke like this now:Template:
<ul role="navigation" position: relative; display: inline-block; margin: 0 auto;>CSS:
On line 3 the calc()-thing was an experiment, since I have two wrappers (one for the banner and menu, and one for the body/content). I thought that perhaps the "length" of the menu had to be defined by the wrappers length, for whom one is ls larger than the other.
#navigation-menu { padding: 0 0px; background: @nav_bar_background; line-height: 100px; border: @nav_bar_border; .rounded-corners(@nav_bar_border_radius); }
#navigation-menu a { position: relative; top: -10px; left: calc(@wrapper_width+315px);}
#navigation-menu > ul, #navigation-menu > ul li { float: left; }
#navigation-menu > ul li a { display: inline-block; padding: 0 2.75em; color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 31px !important; }
#navigation-menu > ul li:hover a { color: @nav_bar_button_hover_color !important; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background; line-height: 31px !important; }
#navigation-menu > ul li a.state-active { color: @nav_bar_button_current_color !important; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration !important; text-shadow: @nav_bar_button_current_shadow; background: @nav_bar_button_current_background; line-height: 31px !important; }
And since I have a custom menu bar, ive also tried this way around:
/* Custom Menu Adjustments */
a.menu_profile_icon {
border-radius:50%;
margin-left: 0.63em;
margin-right: 0.50em;
margin-top: 8px;
padding: 0!important;
width: 58px;
}
.menu_profile_icon img {
border-radius:50%;
margin-left: 284px;
}