Hamburger Menu

Activello
1

Hello

I would like to make my hamburger menu on mobiles show in black and thinner lines.

Could you provide css for this?

Thank you,
Lucy

2

Hi there

In order to check your question i need to see your live website, please provide url and i will take a look

4

Hey there

Looks like you already managed with this? I see black line in the hamburger menu?

5

It’s the standard grey hamburger menu. I would like css to make it black and to make the lines thinner.

Also, it shows as purple on Android when selected - can you fix this?

6

Can you help with this? Also, I wanted to ask on my search bar query how to apply the css to mobile browsers?

7

Hi Lucy

You can use this CSS code to change burger line colors:

.navbar-default .navbar-toggle .icon-bar {
background-color: #f00;
}

how to apply the CSS to mobile browsers? - You can use this method CSS @media Rule

8

Noda, thank you. That works perfectly. Is there a chance you can help with the search bar query further? I want to make the css apply to mobile browsers too - I can’t post under the request as it has been closed.

Thank you,
Lucy

9

Hi Lucy,

Sure i can help you but please clarify what do you mean in: search bar query and want to make the css apply to mobile browsers too

10

Hello

Earlier I started a thread about the search bar widget which is now closed.

I used the following to edit the search bar in the widget area of my sidebar but the font doesn’t apply to mobile browsers - can you help me make that happen?

input.search-query {
font-family: guess !important;
border: #e5d0b9;
}

#searchsubmit {
display: none;
}

Also, the border highlight was blue when typing in the box and I changed it to #e5d0b9 but there is still a blue line that appears to the right of the box - how can I get rid of that? Image attached.

Thank you,
Lucy

11

Browsed all your pages, I can’t see any sidebar any search widget… I have no words, im still asking you to provide a link to the page where I can see the problem but you never do this :slight_smile:

12

Noda, I always provide a link when I can and you generally respond without code or tell me code is impossible for the issue and I then resolve it on my own.

I cannot provide page access as it is for members only. If you know how to make font apply to mobile browsers, this is knowledge separate from any singular site issue.

13

Dear Lucy, I cant generate codes without seeing the actual page, talking is not about the website, I need to see the page where you have this question, providing website URL where everything is hidden is useless for me, unfortunately, ic ant generate codes without it

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

14

Guess what? I managed to find css to get rid of the blue border on desktop and mobile:

.form-control:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}

15

If you visit this page you can see the search bar: https://lucydimarino.com/test-page/

I would like the border to show all of the time on desktop and mobile as well as when inputting text. On desktop only the top shows and on mobiles, nothing.

Currently, when inputting text on a mobile, only the bottom and right side show and are different thicknesses - see attached. How can I make it show as it does on desktop.

Finally, why on different browsers does my accent colour show as purple?

Thank you

16

Hi Lucy

Finally, you are sharing your page link with sidebars :slight_smile:

try this code:

form.form-search {
border: 1px solid #8f8f8f;
}
form.form-search .input-group {
width: 100%;
}

17

This doesn’t work:

  1. I do not want to make the search bar wider.
  2. The border is not an even thickness on each side.
  3. A second border appears within the box when inputting.
  4. The blue border appears again.

Please see attached. I have removed the css for now as it makes the bar look bad.

A second query regarding search results - I have this css to hide page titles:

h1.page-title {
display: none;

Can I have something that makes them appear in the search results page?

18

Hello

Please see above - the code for the search bar causes issues and I would like to have page titles show in search results even though they are hidden on pages. I have tried variations of this but it doesn’t work:

@media (min-width:979px){
.search-results article
h1.page-title {
visibility: visible;}
}

Thanks,
Lucy

19

HI Lucy

Here is the new code for the search bar for both, desktop and mobile:

.widget input[type=“text”].search-query {
border: 1px solid #e5d0b9;
}

20

Thank you. The code for the search bar shows a blue outline on the top of border on mobile and tablet browsers - please see attached.

The WooCommerce code doesn’t apply where Montserrat is used. Is there a way to override this?

21

Attached now!