[Support request] CSS issues

[Engelbrecht]

Hi Gp Team,

I have both some questions and some issues concerning the search field.

Issues first, I implemented the css styling for collapsing the menu from 1024 px. I found the code in the forum. It works great! However, my logo is no longer centered below 1024px and i think its until 768px. Could you have a look?

When im on small devices i change the content url (path to smaller logo) and it also removes the “a href” i have wrapped the original logo in. It links to the frontpage.. Any idea why it is removing the clickability?

Css: @media (min-width: 200px) and (max-width: 374px) {
.site-logo.mobile-header-logo {
height: 40px;
padding-top: 10px;
content: url(“https://www.bryllupskuller.dk/wp-content/uploads/2018/08/BryllupskullerFarveLogo.svg”);
}

On my iphone 7 (safari) the placeholder/label in the search box is not fully centered. Its only showing the lower half of the text. Like the text is on its way out of the box, upwards sort of speak.

I am also considering replacing the search icon from the mobile header and creating a search box in top of the menu-toggle menu (My slideout menu is comming from top and down below the menu). Do you have any resources on how to do that? I have searched the forum for some hours without luck.

Last questions, i did hire a developer to create a push menu from the right and it seems to be working OK. Prss the user icon on mobile menu and a menu appears. We discussed it in another thread on how it could be done, but im not totally sure its done 100% correctly in the manner of how Tom or the GP team would do it.. If its to much i ask for, just ignore my request, but would you mind have a look at the push menu and see if there are any issues with it? Im afraid there are issues that should be adressed in manner of CSS and JS, but im not competent enough to tell what, if there are any. 🙂

Thank you for your support so far!

[Tom]

Hi there,

1. Your logo looks centered to me – did you get this fixed?

2. Maybe try this?:

@media (min-width: 200px) and (max-width: 374px) {
    .site-logo.mobile-header-logo img {
        content: url('URL TO IMAGE');
    }
}

3. Any chance you can show me a screenshot of this on your phone?

4. So you’d like an actual search field within the mobile header instead of the icon?

5. I’m not seeing anything wrong with it 🙂

[Engelbrecht]

1. Not with this screen width:

2. That works, but then my icons cannot get stuffed close enough together without going to second line for small decives. Its best inspected in chrome.

3.

4. Yes something like this: . How can i also achieve the social icons effect like in the picture? I’ve tried asking for it before on the forum but didnt had any succes with it.

[Tom]

1. Ah, you’d need to do something like this:

#mobile-header .site-logo {
    position: absolute;
    left: calc(50% - 100px); /* 100px being half your logo width */
}

2. Not sure I’m seeing this. Maybe the above fixed it?

3. Weird, can you try adding this CSS?:

.navigation-search input {
    line-height: 1;
}

4. Just to confirm, those areas would only display once the mobile header is opened?

[Engelbrecht]

1. Worked like a charm!
2. Issue still persists. As said, it would cause the image to break line so the icons end up below so the the code you wrote wont resolve it.
3. That did solve it. Is this something you implement in next GP theme update since the issue have been there from the fresh install?
4. Yes, only visible when the menu opens. These menu elements is only created for this menu, so you wont see it on desktop main menu or user menu.

[Tom]

2. I can’t get this to happen – what screen width are we talking? You may just need to reduce the logo width at whatever point necessary.

4. There isn’t a hook available at the end of the list there, unfortunately. I wonder if adding a widget area to the menu would work though?: https://wordpress.org/plugins/widgets-in-menu/

That way you could add your own HTML at the end of the menu.

[Author]

Posts