- This topic has 30 replies, 4 voices, and was last updated 3 years, 5 months ago by Tom.
-
AuthorPosts
-
February 1, 2020 at 4:25 pm #1151712TomLead DeveloperLead Developer
Hmm, which page is
1127
?February 3, 2020 at 5:22 am #1152774MaxPage 1127 is the landing page/homepage. You will get there if you click on the “home” button in the menu. I tried the same code with another page-id but that did not work either.
February 3, 2020 at 8:52 am #1153154TomLead DeveloperLead DeveloperThe navigation is set to align left, so the
nav-aligned-center
class isn’t true.Try this instead:
@media (min-width: 2317px) { body.page-id-1127.nav-aligned-left .main-navigation .main-nav > ul { display: flex; justify-content: center; } }
February 3, 2020 at 12:57 pm #1153340MaxHm that centered the navigation but it also did more than that. Basically it duplicated parts of the header. You will see once you visit the homepage. Do you have an idea what might be causing this? The header is custom-made with elements and customized with a bunch of css.
February 3, 2020 at 4:54 pm #1153480TomLead DeveloperLead DeveloperFebruary 4, 2020 at 10:53 am #1154496MaxI believe, that did the trick!
The `display: flex;
justify-content: center;` code I understand, but if you do not mind me asking:What does the line
.main-nav > ul
do?Already a big thank you!
February 4, 2020 at 3:43 pm #1154700TomLead DeveloperLead DeveloperIt targets the direct child (
<ul>
) of the.main-nav
element. This applies the flexbox to the<li>
elements inside of it, which centers them.February 5, 2020 at 8:50 am #1155641MaxMuch obliged!
November 11, 2020 at 7:11 am #1526936MaxHi there!
I opened the topic again because I noticed an issue which is probably happening due to the code provided here.
I am using the latest version of GP premium and WordPress.
If you take a look at the screenshot I took (first link) you will see that the search bar elements don’t look like they usually do:
At a browser width of 2317px a breakpoint occurs (on specific pages) and changes the opened search bar to what you see in the screenshot. I would like the “X” icon which is used to close the search bar to be located to the far right of the search bar again (where it usually stays).The only code containing the breakpoint which I found is this one – one of these should be responsible for the “X” jumping to the center:
@media (min-width: 2317px) { body.page-id-1127 .site.grid-container { margin-left: 33%; margin-right: 16%; } } @media (min-width: 2317px) { body.page-id-1127.nav-aligned-left .main-navigation .main-nav, body.page-id-2205.nav-aligned-left .main-navigation .main-nav > ul { display: flex; justify-content: center; } }
Any help would be much appreciated.
Best wishes
Max
November 11, 2020 at 8:22 am #1527037LeoStaffCustomer SupportHave you fixed this?
It’s working fine for me:
https://www.screencast.com/t/xSDogznL7KNovember 11, 2020 at 11:35 am #1527283MaxHi Leo!
The issue remains. To me it looks like in your screencast you were still at a resolution below 2317px (even below 1925px- at this width the banner image switches to a broader version) – so somewhat close to FullHD. If you use a native 2K or 4K resolution or drag your browser until it reaches a width of min. 2317px you should see the issue.
November 12, 2020 at 2:50 am #1527958DavidStaffCustomer SupportHi there,
You can try adding the CSS rule – it will contain the search field to the width of the navigation.
@media (min-width: 2317px) { body.page-id-1127 #site-navigation { display: flex; } }
November 12, 2020 at 6:42 am #1528179MaxThank you – that would definitely work. Could I also limit the width of the search field using an absolute value, e.g. 300px?
November 12, 2020 at 10:28 am #1528771TomLead DeveloperLead DeveloperHi there,
You could try doing this:
.navigation-search.nav-search-active { width: 300px !important; left: auto; }
November 13, 2020 at 8:06 am #1530076MaxThank you Tom – that works as well!
-
AuthorPosts
- You must be logged in to reply to this topic.