• Author
    Posts
    • #4123
      David Wild
      Participant

      How can I change the font, size and colors of the main menu buttons?
      Thank You,

    • #4220
      David Wild
      Participant

      Hi Andre,
      I would still like to have the option to change the main menu buttons. Also on my mobile menu it is not behaving like I have set up in my menus. I dont want pulldown menus I just want every page listed 1 after the other, no submenus. On other themes I’ve used I have had full control of changing fonts,colors, sizes etc. and mobile menu controls. The site is now at this url https://www.twincitiesrooter.com/119
      Any help would be appreciated. BTW the updates you made work great. Thank you David

    • #4221
      Andre
      Participant

      Yikes… My apologies David; I had no idea your post for this was 5 days ago.

      You don’t have to have submenus if you don’t want them. With your custom menu, just make them all parent menu items (no submenu links). However, you have a ton of submenu links, so the header will be staturated with lines of menu links. Is this what you are wanting where all menu links are visible? If so, don’t drag any menu links under another in your site’s admin area.

      Also, I think for so many menu links, you may want to switch the site header setting to be the “Wide” option which gives more room.

      (Good to hear the update to the theme is working great).

    • #4223
      Andre
      Participant

      Regarding font, size, and colour, you would use custom CSS on the theme’s default styling:

      .main-navigation-menu {
          font-family: "Open Sans","helvetica neue", sans-serif;
          font-size: 0.938rem;
          font-weight: 400;
          letter-spacing: 1px;
          text-transform: uppercase;
      }

      You can take each style attribute and change it to what you prefer. For colours, the theme has this:

      .main-navigation-menu a:link, 
      .main-navigation-menu a:visited {
          color: #fff;
      }

      If you want to add a “hover” colour for mouseover, you can add this:

      .main-navigation-menu a:hover{
          color: #fff;
      }
    • #4225
      David Wild
      Participant

      Great THanks for the css to change menu up!

      For the menus, I want the menu as it is for desktops with sub menus, but for mobile I would like to just show all the links. Like this site on mobile http://www.discountrooter.com (check out the menu there) This theme allowed it and I cloned this site from that one and wanted menus on mobile the same. Also On mobile the icon can I change that color?
      Thank You,

    • #4259
      Andre
      Participant

      Yikes… that would require a recoding of the menu.

      The icon colour…

      .main-navigation-toggle {
          color: #fff;
      }
      .main-navigation-toggle .icon {
          fill: #fff;
      }
    • #4260
      David Wild
      Participant

      The menu on mobile was fine on another theme. Maybe I’ll try rebuilding the mobile menu and see if that works. If you have any suggestions in the meantime, much appreciated.Thanks much for your help Andre.

    • #4265
      David Wild
      Participant

      Hi Andre,
      I discovered that the main or primary menu is overriding the mobile menu. So the primary menu is used for mobile. Is there a way to override this?
      Thank You,

    • #4267
      David Wild
      Participant

      Hi Andre,
      The mobile menu I noticed is not even displaying correctly it is leaving out 1 submenu page. Something needs to be fixed on the mobile menu. Also is there a way to put buttons around the desktop main menu? or just a rectangle back ground?
      This will be all I ask of you further the site is almost complete.
      Thank You
      David

    • #4288
      David Wild
      Participant

      Hi, I figured out a background color for the menu area. Now if you could help me on the mobile menu that would be great.
      Thank you
      David

    • #4323
      David Wild
      Participant

      any suggestions?

    • #4324
      Andre
      Participant

      Hi David. Apologies. Yesterday we had some email and notification problems, and none of us were receiving any. I see you posted yesterday about menus. The menu is a combined desktop and mobile in one. Depending on the device, styles are applied based on what is called media queries. In a nutshell, styles are assigned based on the screen size that the site is being viewed in.

      So to answer your first question is there a way to override the primary menu so it’s not used for mobile….answer is not without rebuilding the menu.

      I’m not clear on what the question is about the mobile menu, if you can clarify more. IS this the issue of 1 submenu not showing?

      I also noticed that your dropdown arrows for the submenus in mobile view has them as black. The default style is:

      .main-navigation-menu > .menu-item-has-children a .sub-menu-icon .icon {
          margin: 0.3em 0 0;
          width: 20px;
          height: 20px;
          vertical-align: top;
          fill: rgba(0,0,0,0.5);
      }

      So you will want to change the “fill” colour of the icon arrow to be white or whatever colour you choose. You will of course add this to the customizer:

      .main-navigation-menu > .menu-item-has-children a .sub-menu-icon .icon {
          fill: #fff;
      }
Viewing 11 reply threads
  • You must be logged in to reply to this topic.