[RickDavieParticipant]

I need to adjust the size (width) at which the Nav Bar changes to the Collapsed Menu. I have added enough menu items/pages so that when the browser window’s width is decreased, the menu is pushed to the next line (see fig.1). I need to readjust the width at which the menu changes to the Collapsed Menu (see fig. 2).

In addition, I need to change the DONATE menu item on the Collapsed Menu to match the original menu (fig. 3).

I have been looking for the location of the styles for these items and have not found them. Can you help?

Thanks,
Rick

http://www.codysfreshstart.org/ WordPress 4.4.2 X THEME 4.3.4 (X Child Theme)

[RupokMember]

Hello Rick,

Thanks for writing in. If you want to trigger the Mobile Menu at a higher screen size (say at 1200px) then you could add this CSS :

@media (max-width: 1200px) {
 .masthead-inline .x-btn-navbar {
  display: block;
  float: right;
 }
 .x-nav-wrap.desktop {
  display: none;
 }
 .x-nav-wrap.mobile {
  display: none;
 }
 .x-nav-wrap.mobile.collapse.in {
  display: block;
 }
}

You can change the max-width value with your own.

Hope this helps.

Cheers!

[RickDavieParticipant]

Thanks! that worked to adjust the max-width / Menu=Collapse.

Now I need to change the DONATE link in the collapsed menu to look like the button in the Main Nave Menu. I am using the code below, placed in the CUSTOM CSS in the Customizer, to set up that button. I need to know how to identify the DONATE link in the Collapsed Menu.

Thanks!

li#menu-item-963 a {
margin-top: 32px;
display: block;
border-radius: 6px;
border: 3px solid #E80000;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-family: Arial Black, Gadget, sans-serif;
font-size:12px;
color: #ffffff;
background-color: #E80000;
height: 30px;
width: 88px;
text-align: center;
padding: 6px;
text-decoration: none;
-webkit-box-shadow: 2px 3px 7px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 2px 3px 7px 0px rgba(0,0,0,0.35);
box-shadow: 2px 3px 7px 0px rgba(0,0,0,0.35);
}

li#menu-item-963 a:hover {
border: 3px solid #E80000;
background-color: white;
color: #E80000;
}

[John EzraMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-963 a {
    margin-top: 15px;
    display: block;
    border-radius: 6px;
    border: 3px solid #E80000;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    font-family: Arial Black, Gadget, sans-serif;
    font-size:12px;
    color: #ffffff;
    background-color: #E80000;
    height: 35px;
    width: 88px;
    text-align: center;
    padding: 6px;
    text-decoration: none;
    -webkit-box-shadow: 2px 3px 7px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 2px 3px 7px 0px rgba(0,0,0,0.35);
    box-shadow: 2px 3px 7px 0px rgba(0,0,0,0.35);
}

li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-963 a:hover {
    border: 3px solid #E80000;
    background-color: white;
    color: #E80000;
}

Hope this helps – thanks!

[RickDavieParticipant]

That worked great! Thanks!!

[JadeModerator]

You’re most welcome Rick.

[Author]

Posts