[Support request] CSS issues

Home Forums Support [Support request] CSS issues

Home Forums Support CSS issues

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #679508
    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!

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #679765
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #679788
    Engelbrecht

    1. Not with this screen width: Website collapsed below 1024px

    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. Search field not showing correctly

    4. Yes something like this: Search field in menu. 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.

    #680358
    Tom
    Lead Developer
    Lead Developer

    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?

    #680461
    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.

    #680794
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.