CSS Tweaks

Activello
1

Hi guys! I’ve used a bunch of CSS I picked up from this forum but have a few issues that I haven’t been able to resolve. They’re kind of minor so I don’t think I need to create multiple topics.
My site URL is: lipstickalchemist.com

1) Center search bar in mobile view (horizontally)

  • Make menu responsive so all elements scale and resize inline in desktop view
    I’ve reduced the font size and padding of the menu items and that has affected how the search bar shows up on different devices. I’ve managed to center it vertically but I’m unable to do so horizontally.
    Additionally I would like the menu to be responsive and scale on desktop instead of having some elements move to the next line upon >100% zoom. (see search bar .jpg and menu resize .jpg respectively)

2) Drop down menu box placement correction (desktop)
This is a bit microscopic but the drop down menu boxes are not in line with the menu. They overlap it by a pixel or two. I’d like it to align perfectly instead. (see drop down menu .jpg)

I also want to mention the problematic featured image size after the recent update. I don’t have a child theme and I don’t wanna get one so I’m waiting for you guys to fix that in the next update which will hopefully be very soon.

Thanks in advance :slight_smile:

2

Hi @lipstickalchemist,

I hope you are well today and thank you for your questions.

1) Center search bar in mobile view (horizontally) + Make menu responsive so all elements scale and resize inline in desktop view I’ve reduced the font size and padding of the menu items and that has affected how the search bar shows up on different devices. I’ve managed to center it vertically but I’m unable to do so horizontally.

I don’t see any Search text on your site as shown in the attached screenshot which you have displayed in your shared screenshot.

Additionally I would like the menu to be responsive and scale on desktop instead of having some elements move to the next line upon >100% zoom. (see search bar .jpg and menu resize .jpg respectively)

The elements moves on next line because there isn’t enough space to fit them in one line so how do you want it to display?

Please share the screenshot of how you want it to display.

2) Drop down menu box placement correction (desktop) This is a bit microscopic but the drop down menu boxes are not in line with the menu. They overlap it by a pixel or two. I’d like it to align perfectly instead. (see drop down menu .jpg)

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

ul.dropdown-menu {
    top: 102%;
}

div.nav-search {
    padding: 4px 3px 0;
}

Best Regards,
Movin

3

Hello Movin!

1) Sorry if I’ve confused you. The attached screen shot of the search bar is in the mobile view. So depending on the device dimension, the “search” text floats about to the left or right. I would like for it to remain in the center, ALWAYS, irrespective of the screen size.
(I dunno why it doesn’t show up in your screenshot, I’ve tested with multiple Androids and iPhone 6, it’s visible there)

2) Again, sorry. I’ve framed the question wrong. What I mean is, I’d like the menu on the desktop to remain the same size as it is in the 100% zoom view. So that when you view it in less than 100% it should be responsive and shrink but over 100% zoom it should just remain the same size while the rest of the page content enlarges.
This may raise another issue of device compatibility, so if you could give me CSS with @media screen size restriction [example: @media (max-width:767px)] so the I have hamburger menu in mobile view, that would be great.

3) And thank you for that code, it works perfectly! :slight_smile:

4

You have to develop custom code to achieve this.

Developing custom code for custom functionality is beyond the scope of support that we provide here.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Colorlib recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

5

Hello, again!

I understand that it’s beyond your scope, but getting a developer is unfeasible for me. I’ve managed to achieve nearly 90% of the desired results meddling with CSS myself and with a little more help from this forum, I think can get to 100%.

If the above is not possible via simple CSS, could you instead tell me how to align the search bar with the other elements on the menu bar? By default, the menu items (home, categories, about, contact) are aligned left and the search bar is aligned right. Is it possible to combine it with the menu items and center align the entire thing?

Any help would be much appreciated! :slight_smile:

6

Oh, never mind! I found some code here and used this
@media (min-width: 767px){.site-navigation-inner{float: none;margin:0 auto;display:table!important;width:auto}}

7

Awesome great to see you got that found.

Have a fantastic day!

8

Hello Movin,

One last thing before I close this topic: How do I justify the menu elements?

Right now, they’re aligned to the center and equidistant from each other, but that means there’s a gap on either side of the menu. I’d like for the first element (in my case, logo) to start from the extreme left and the last element (search) to be at the extreme right with the rest of the items at an equal distance from each other.

Please do try to help me with this! Looking forward to your solution :slight_smile:

9

I’m still waiting on help for this, guys! Please have a look.

10

It’s hard to achieve this just developing CSS code but you can use below custom CSS code and enhance it along with Javascript code to achieve this.

@media (min-width: 768px){
.navbar-nav>li:first-child {
    position: fixed;
    left: 0;
    top: 0;
}
.navbar-nav>li:last-child {
    position: fixed;
    right: 0;
    top: 0;
}
}
11

I hate having to bother you again and again, Movin. Sorry about that, but this doesn’t work right. :frowning: The first and last elements move to the end with random space between them and the other menu items.

12

Please read my previous reply regarding this in which i already told you that it is not final solution and you have to develop custom code to achieve this which is beyond the scope of support that we provide here.

13

Sorry I read that wrong. I thought this was it, just needed to mess with the numbers. Anyway, thanks for your help :slight_smile:

14

You are most welcome here :slight_smile: