[Resolved] I need help to customize my site a bit

[Arif]

Hi! I just bought GP Premium & I was a bit lost so I tried the “Marketer” from the library. Now I want to modify it a little bit. My website is https://geekvinci.com, I need help with the following things:
1. The search bar on my website looks bad. When I click on it It goes farther to the extreme right end, you can check it out to know it further. Same is the case with mobile site, It overlaps the logo.
2. I want a menu like Generatepress site on my mobile site with no “MENU” written besides it.

I want to know what can I do to resize or make Menu and search icon bolder.

Please help! I’d appreciate 🙂

[Leo]

Hi there,

1. I just tested and it’s only going the length of the navigation:
https://www.screencast.com/t/cZIlLslXoq

You can use this CSS to make it shorter:

.navigation-search input {
    width: 80%;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

2. This should help: https://docs.generatepress.com/article/mobile-menu-label/

Let me know if this helps 🙂

[Arif]

Hi! Thank you for the help. It fixed my search bar issue, But how can i resize my menu button and make it a bit bigger and bolder you know, add weight to it. Plus In my mobile site I want search icon to disappear how can I do that?

[Leo]

Try this CSS:

.menu-toggle:before {
    font-weight: 800;
    font-size: 20px;
}
#mobile-header .mobile-bar-items {
    display: none;
}

[Arif]

This
.menu-toggle:before {
font-weight: 800;
}
#mobile-header .mobile-bar-items {
display: none;
}

Added the weight to the button but it is the same size as before, How can I make it a bit bigger?

Thanks!

[Leo]

Added style for font size:
https://generatepress.com/forums/topic/i-need-help-to-customize-my-site-a-bit/#post-957696

[Arif]

What If I needed to make it move a little bit down?

[Leo]

There isn’t a good to do that as it defaults to be align centered vertically.

You can give this CSS a shot but it will increase the header height by a bit:

.main-navigation.has-branding .menu-toggle {
    padding-top: 15px;
}

[Arif]

emm, yes it sorta worked. Thanks!
Love GP!

[Leo]

No problem 🙂

[Author]

Posts