WordPress.org

Forums

Customizr
[resolved] How to modify my main navigation menu with CSS (28 posts)

  1. knight1fox3
    Member
    Posted 1 year ago #

    Hello,

    New to WordPress and of course CSS. I've been searching for the past few days on how to modify my main navigation menu (www.knightfoxpc.com) with CSS to make the menus a bit more visible and/or flashy. I must be doing something wrong because I've tried at least a dozen or so suggestions from the WP forums on modifying the "nav menu" but nothing seems to change when I enter the CSS code accordingly. Perhaps I'm not correctly applying the code to my main menu (Menu 1) or it is being overridden by my theme (customizr)? Again, sorry for asking what seems to be a very common question but I could certainly use a bit of assistance here.

    On a separate note, I was able to modify one of my information tables with CSS so I was pretty happy about that. Thanks in advance for any suggestions.

    EDIT: Perhaps I should be using this to do what I need? http://wordpress.org/plugins/simple-custom-css/

  2. Mike Sneed
    Member
    Posted 1 year ago #

    I have a suggestion.. I don't know exactly what kind of customizations you want to do but start with a child theme.. and Customizr has one here.

    If you go to that page you'll find a link to the snippets section and you can search for some code to, for example, center the nav menu, change the color, etc.

    From there, and with that code, you would put that into the child theme's css file.

    Something like that.

    Hope that helps!

  3. knight1fox3
    Member
    Posted 1 year ago #

    Thanks for the response. I did install Child Themify instead of the one you linked because the developer version would fail upon attempting to install. I have the child theme all set up and working fine. I have CSS code entered for one of my tables and that is working just fine. However, when I try to implement CSS code for modifying the nav menu, nothing seems to work. I searched the code snippets and I believe these are what code I should be using. Only I see no change when I save and publish. Am I doing something wrong or is something being overwritten?

    http://www.themesandco.com/snippet/change-navbar-colorsfontsize/

    http://www.themesandco.com/snippet/adjust-navbar-box-settings/

  4. ElectricFeet
    Member
    Posted 1 year ago #

    Can you give a concrete example of something specific that you want to do (preferably with a link to your site) so we can walk you through it?

  5. knight1fox3
    Member
    Posted 1 year ago #

    So, on the nav menu of my home page (http://knightfoxpc.com/), I would like to modify the menu items below:

    Home
    Services
    Gallery
    About
    Contact

    Specifically I would like to change the font size, color and possibly make it bold or add a few effects. I tried the CSS code snippets in the two links above which were listed on the customizr developer website. But as I mentioned, I don't see anything being changed. So I'm not sure if perhaps the theme is overriding something. And I am using a child theme (Child Themify) as instructed by the developer. Any help/suggestions would be greatly appreciated. Thank you.

  6. rdellconsulting
    Member
    Posted 1 year ago #

    If you have setup the Child Theme then fine. You don't need the Plugin anymore so deactivate it. If that doesn't fix it then you need to do the Plugin Test completely:
    Deactivate all plugins
    Test if OK
    If OK, reactivate plugins one-by-one to find the culprit

  7. knight1fox3
    Member
    Posted 1 year ago #

    I believe only the default set of plug-ins that came installed with WordPress are present. I think perhaps my issues is either I'm not using the correct CSS code or I'm not entering it in the correct location.

  8. stephencottontail
    Member
    Posted 1 year ago #

    That code from those links looks right, so I'm not sure why it doesn't work. Where are you placing that code?

  9. knight1fox3
    Member
    Posted 1 year ago #

    In the appearance -> customize section. Then in the Custom CSS text area. I have other CSS code in there to modify one of my tables so I know it works somewhat. Just not sure why I can't change the menus. Doesn't seem like it should be all that difficult. I read a few other topics where it was suggested to had !important or something like that to it which "forces" the effect I guess?

    Also, that menu I'm trying to change is called "Menu 1" in my set-up. Do I need to specify that somehow in the CSS code?

  10. stephencottontail
    Member
    Posted 1 year ago #

    Something I just thought of. Are you trying to style your normal menu or the dropdown menu that appears at a smaller window size? You need to use different CSS code to target the dropdown menu.

  11. knight1fox3
    Member
    Posted 1 year ago #

    Right now I don't have them configured as drop-down menus. They just navigate to the target page. Do I need to modify the HTML code for my main page to tell it to point at the CSS instead of the primary theme? Something similar to this perhaps? http://wordpress.org/support/topic/how-to-add-css-for-custom-page-template?replies=10

  12. stephencottontail
    Member
    Posted 1 year ago #

    I'm still a bit confused about what's going on, because the code snippets provided in those links should work. Are you trying to style the nav menu in the header or the footer (down near the search bar)?

  13. knight1fox3
    Member
    Posted 1 year ago #

    In the header. And when I do update/save from the CSS, I see no change what-so-ever.

    Oh and for the record, I only picked the first snippet from the first link I provided (i.e. /* Adjust Menu (red) text color, (Garamond) font-family, (1.5em) font-size */).

  14. batharoy
    Member
    Posted 1 year ago #

    If your child theme is active, it looks like it is, try adding it to the style.css under Appearance > Editor
    EDIT: And add the whole block of code just to test.

  15. knight1fox3
    Member
    Posted 1 year ago #

    LOL, I just did that batharoy. And guess what, the text has changed some now. Definitely operator error in not using ALL the code. I thought I could just pick and choose which little pieces to use. But apparently I needed all of it. I guess that was yet another lesson learned. Thanks so much for everyone's help and suggestions. Much appreciated. And I'm sure I will be back with more questions. =)

  16. kharma2k
    Member
    Posted 1 year ago #

    I am working in a formflex theme. They offer no support when something was customized. Someone modified the navbar area to include a phone number. That person is now nowhere to be found! My client is asking me to change the number. I cannot figure out how to accomplish this - Help? http://www.pavinggeorgia.com

  17. d4z_c0nf
    Member
    Posted 1 year ago #

    @kharma2k this is the support forum for Customizr theme.
    Anyway you can hide it with css. In the style.css you have:

    .phone-number {
        float: left;
        margin-left: 35px;
    }

    just put there the property, display:none; , and remove the other two properties you don't need anymore.

  18. kharma2k
    Member
    Posted 1 year ago #

    Thank you, d4z_c0nf! Under Appearance--CSS Edit in left bar, this is what is shown: http://www.pavinggeorgia.com/wp-admin/themes.php?page=editcss How do I access the actual css page? (Thanks!)

  19. d4z_c0nf
    Member
    Posted 1 year ago #

    Just to be clear, that page is an admin page, I cannot access there.
    Anyway yeah Appearance -> Editor (something of the sort), you should see on the right many files, one of those is style.css.
    But, again, you're using another theme, a premium theme ...

  20. kharma2k
    Member
    Posted 1 year ago #

    I could fix this in a heartbeat on Dreamweaver - all I need is to locate an editable css page. The css link in navbar doesn't go to a css page. This should be so intuitive, it's not rocket science I know. :(

  21. kharma2k
    Member
    Posted 1 year ago #

    If I privately sent you my login info, could you take a look?

  22. d4z_c0nf
    Member
    Posted 1 year ago #

    Do you have an ftp access to that site?
    The style.css is located here:
    http://www.pavinggeorgia.com/wp-content/themes/Flexform_v1.0.2/flexform/style.css

  23. kharma2k
    Member
    Posted 1 year ago #

    Thanks for link to css page!
    css uses "phone number" so my question now becomes where do I modify the ph number? this won't be on css page. Re ftp, I access site on BlueHost - I could ask them to ftp it somewhere??

  24. d4z_c0nf
    Member
    Posted 1 year ago #

    Don't know about bluehost.
    Of course phone number is somewhere, but where?
    I presume it should be in the header template (if there's an header template, again.. I don't know that theme).

  25. kharma2k
    Member
    Posted 1 year ago #

    THANKS for helping me on this issue, d4z_c0nf! Cannot tell you how helpful you've been as a teacher! Situation was quickly resolved and I learned a lot!!

  26. d4z_c0nf
    Member
    Posted 1 year ago #

    Glad to hear that :D

  27. aneibauer
    Member
    Posted 10 months ago #

    I have downloaded WordPress Post Tabs for my site here

    I want to create a tabbed navigation so that the tabs open up horizontal menus rather than content (disabling my dropdown menu). So I want to create tabs that reveal the appropriate divs (the horizontal navbars).

    I can't seem to get these working then so that I have normal content in each tab in the form of a navbar. The tricky part is telling WordPress to default a tab open versus the other based on if the user is in the student or teacher part of your site.

    Any thoughts?

  28. ElectricFeet
    Member
    Posted 10 months ago #

    This is a three-month old post on the Customizr forum and you're using the News theme based on Genesis. I suggest you post on the WordPress Post Tabs support forum here: http://wordpress.org/support/plugin/wordpress-post-tabs

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic