WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Border around the menu (17 posts)

  1. jenmatt
    Member
    Posted 1 year ago #

    Is it possible to remove the border around the menu? Would I have to code to do so?

    Thanks

  2. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    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

  3. jenmatt
    Member
    Posted 1 year ago #

    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

  4. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    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!

  5. jenmatt
    Member
    Posted 1 year ago #

    Thanks heaps.

  6. ElectricFeet
    Member
    Posted 1 year ago #

    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?

  7. ElectricFeet
    Member
    Posted 1 year ago #

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

  8. ncowen22
    Member
    Posted 1 year ago #

    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.

  9. rdellconsulting
    Member
    Posted 1 year ago #

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

  10. creativerse
    Member
    Posted 1 year ago #

    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.

  11. rdellconsulting
    Member
    Posted 1 year ago #

    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;
    }
  12. creativerse
    Member
    Posted 1 year ago #

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

  13. gugol
    Member
    Posted 10 months ago #

    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!!

  14. rdellconsulting
    Member
    Posted 10 months ago #

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

  15. Novata2
    Member
    Posted 9 months ago #

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

  16. patmur
    Member
    Posted 7 months ago #

    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

  17. rdellconsulting
    Member
    Posted 7 months ago #

    Start a new topic, and add a link to your site please.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags