Menu Appearance
- This topic has 19 replies, 2 voices, and was last updated 3 years, 4 months ago by
Zex.
-
AuthorPosts
-
February 17, 2020 at 3:59 pm #24499
Rade Leovac
ParticipantHello! I want my logo to appear in the far left, while my menu is centered and search button is on the far right.
I also wanna edit top menu so my number appears far left, and social icons far right. Is this possible?
thanks in advanceFebruary 17, 2020 at 4:08 pm #24501Rade Leovac
Participant.site-header .sticky-header .sticky-header-inner {
max-width: 1250px !important;
}
#agama-logo{
margin-left: -120px;}
i’ve tried this, and its currently published, but it completely destroy’s the logo on mobile, as its completely far left…February 17, 2020 at 4:10 pm #24502Rade Leovac
Participant(That was only for logo, i wanna adjust basically everything so it looks decent on every device(Logo far left, menu center, search far right)
Also, is there a way to change only top menu color to black and text to white? To make it different it from the main menu.
Thanks and sorry for many questions.
February 17, 2020 at 4:33 pm #24503Zex
ModeratorHello, Rade!
Try to insert the following CSS codes into Customizing->General->Additional CSS:
#top-bar-wrap, .site-header .sticky-header .sticky-header-inner { max-width:100%!important; } .sticky-nav>li:last-child{ padding-left:150px; }
Change the padding-left value as you wish.
Regards
February 17, 2020 at 4:38 pm #24504Rade Leovac
ParticipantThat actually worked amazingly.
The only problem i’m left with is that MENU is not aligned to the center (feels a bit to the right)And what about the turning the top menu into black background? Is it possible?
Thank u so much Zex.
February 17, 2020 at 4:42 pm #24505Rade Leovac
ParticipantLike this https://ibb.co/hyCKH7Q
February 17, 2020 at 5:10 pm #24507Zex
ModeratorHi,
The search button is a part of the main menu and can’t be separated. For that reason, you can adjust the main menu position using only the padding-left value from the last part of the code I gave you. (try to increase this value)
To change the background color of the top menu, add the following code:
#top-bar{ background-color:black!important; }
You’ll also need to change the color of the top-menu social icon links:
#top-social ul li a { color:white!important; }
Change the color value according to your needs.
To change the color of the phone number on the left, go to
Customize-> Navigations-> Navigation-Top and adjust the color to your needs.Regards
February 17, 2020 at 5:16 pm #24508Rade Leovac
ParticipantI’ve realized how to scale text to the left, just need help with changing only background color of the top navigation menu!
Sorry for writing like a teen girl in 42x posts!
February 17, 2020 at 5:17 pm #24509Rade Leovac
ParticipantAh did not see your post! Thank you a bunch mate, will get back to you!
February 17, 2020 at 5:18 pm #24510Zex
ModeratorIt’s not a problem at all, that’s why we’re here.
Regards
February 17, 2020 at 6:04 pm #24511Rade Leovac
ParticipantOkay! So i’ve tried all of your suggestions and it works fine expect for the padding thing,
I simly cannot make it look centered no matter how much do i increase the padding, and on different resolutions it looks out of place when it looks great at 1920×1080 for example.
can i get around this? Im trying hard, thanks
February 17, 2020 at 6:08 pm #24512Rade Leovac
ParticipantIf it can’t be done i’ll give it up, but just wanna try everything first!
Thank you so much Zax, you’re the man!
February 17, 2020 at 7:35 pm #24515Rade Leovac
ParticipantAlso, while I’m here, is there a way to lay out front page boxes below one another? And to scale images a little larger?
Im sorry for all day bugging you, but once im done i wont ever again :))
February 18, 2020 at 12:53 am #24521Rade Leovac
ParticipantOne more thing!
Is there a thing that forces my image size through widgets to be ‘medium’ or 300×109 px?
I’m trying every other option but the picture won’t resize (The original pic is 1920×720).
Thanks man.
February 18, 2020 at 10:51 am #24532Zex
ModeratorHello Rade!
In the next major release, we prepare more Header styles.
but unfortunately, the header styles we currently have are not coded to work in that way.Try to additionally insert the following code:
.agama-primary-nav { float: none!important; left:14%!important; max-width: 65%!important; }
And replace the pading-left value with this one:
.sticky-nav>li:last-child{ padding-left:12vw!important; }
-
AuthorPosts
- You must be logged in to reply to this topic.