Border around the menu

Hi,

Copy this code in the style.css file.

.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
}

If you also want to remove the grey background, use this code :
.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background:none
}

In the next release of the theme, there will be a Custom CSS field in the customizer. You should then copy the above code in this field : it will not be removed when you update the theme.

Please mark the topic as resolved if this helped!
Thanks for using Customizr

Thank you, sorry one more thing. I haven’t set up a child theme, as I just cant get ftp to work from my computer. I need this up asap, can I still code on the parent theme or will I wreck it?
Thanks

No problem to copy this code on the parent theme.
Just don’t forget to copy it again (in your child theme or the coming Custom CSS field) when you will update it!

Thanks heaps.

Hi Nikeo,
I’ve just noticed that the CSS you posted above doesn’t actually eliminate the navbar background and shadows completely. The corners are still there. They are tiny specks at each of the four corners where the navbar used to be, but now I’ve noticed them, I cannot take my eyes off them!

They are just about 4px high, in light grey. Interestingly, Firefox is the culprit this time and Safari doesn’t show them at all.

Any idea how to banish these corners?

Gotcha!

The grey background CSS you pasted above needs an additional “transparent”:

.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px ;
-moz-box-shadow: 0px 0px 0px ;
box-shadow: 0px 0px 0px transparent;
background:none
}

Because even though you set the shadow to be 0 pixels, it’s still rendering on the corners (must be a bug in mozilla). Setting it to be transparent gets rid of it altogether.

A rather existential issue: the box shadow needs to be transparent, even when it isn’t there…

Hi, is there a way I can make the navigation bar go all the way across the top (instead of having the logo area on the top left). I would like to have it sit evenly over the slider. Thanks for any advice you might have.

Start a new post please. Lucky I picked it up as [resolved]

Can you show similar code or direct me where to look if I just want to change the color of that box, rather than completely get rid of it? (I’m wanting to change the gradient from its current state (white at top, grey at bottom) to white at top, #93a85b (green color) at bottom.

Here’s the code to change:

.navbar-inner {
  background-color: #FAFAFA;
  background-image: linear-gradient(to bottom, white, #F2F2F2);
  background-repeat: repeat-x;
  border: 1px solid lightgray;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
  min-height: 40px;
  padding-left: 20px;
  padding-right: 20px;
}

Ok, thank you. It worked when I changed the appropriate code.

I’ve got a problem when I use this code:

.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px ;
-moz-box-shadow: 0px 0px 0px ;
box-shadow: 0px 0px 0px transparent;
background:none
}

In Firefox the social links at the top and at the bottom are shown without their images (I mean you can only see something weird).

Any clues about it??

Thank you in advance!!

Start a new Topic please. This one is [resolved] Include a link to your site.

I have just copied and pasted the code ElectricFeed gave and it have worked.
Thanks!!

Hello there,
do not know if I have to open a new conversation or it is ok to continue here even if it is closed:

I have deleted the icon before the title in the sample pages with adding this code to the custom css field with this code:

.format-icon:before {
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
padding-right: 10px;

and it worked
then I wanted to delete the box around the main menu but if I copy also this code
it does not work – it just works if I cancel the first one

.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px ;
-moz-box-shadow: 0px 0px 0px ;
box-shadow: 0px 0px 0px transparent;
background:none
}

how can I add more then one and let both working?
thanks a lot