Title: Header and Menu Issues
Last modified: August 22, 2016

---

# Header and Menu Issues

 *  Resolved [russinternational](https://wordpress.org/support/users/russinternational/)
 * (@russinternational)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/)
 * Hi guys,
 * Love the features from the new update, but my heavily customised version is now
   facing issues. Any advice would be brilliant 🙂
 * 1) **Mobile Menu Issues**
 * The mobile menu is not working properly for me (although this isn’t a new issue).
   The menu items kind of overlap each other, which is particularly obvious when
   you hover.
 * [Mobile Menu Issue Screenshot](http://tinypic.com/r/or79ys/8) – that is a screenshot
   of the issue 🙂
 * 2) **Double Menu Problem**
 * This is quite a big issue. For some reason my menu is now doubled.. again, screenshot
   below to illustrate this.
 * [Double Menu Issue](http://tinypic.com/r/v748di/8)
 * 3) **White box behind Featured Pages (Mobile mode)**
 * Self explanatory in the screenshot provided. It is fine when the website isn’t
   in mobile mode.
 * [White Box Screenshot](http://tinypic.com/r/2yo4l7b/8)
 * 4) **Sticky Header Issues**
 * The menu is a different size when not selected, and also the colour being white
   looks rather odd given the logo, although I could make that transparent.
 * [Stick Header Screenshot](http://tinypic.com/r/w89x7a/8)
 * —-
 * I’d really appreciate any help that people can give me on this, you can view 
   the full website at [Russ International](http://russinternational.org) (link,
   again!)
 * Thanks

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5475995)
 * 1) Mobile Menu Issues
 *     ```
       .nav-collapse .nav {
       float: right;
       }
       .nav-collapse.tc-hover-menu-wrapper {
           width: 30% !important;
       }
       .navbar .nav > li > a, .navbar .nav > li > a:first-letter, .navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a {
           white-space: nowrap;
           line-height: 2em;
       }
       ```
   
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5475996)
 * 2) Not seeing a double menu
 * 3)
 *     ```
       @media all and (max-width: 768px) {
       .round-div {
       border: 94px solid #EEEDEE;
       }
       }
       ```
   
 * 4)[Snippet ](http://themesandco.com/snippet/adjust-3-2-sticky-header/)
 * You need to look at the css you’ve added and correct with the above changes
 *  Thread Starter [russinternational](https://wordpress.org/support/users/russinternational/)
 * (@russinternational)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476047)
 * Thanks for the answers here, just a few responses here;
 * 1) Fixed, thanks!
    2) Yeah, not sure what was wrong there – seemed to fix itself.
   3) This doesn’t fix the circles when it is on the mobile website – not sure what
   the issue is. 4) The snippets don’t change the menu text size – at in the text
   stays very small – I can only change the selected page text size.
 * Below is all the CSS being used here; overload time…
 *     ```
       /* Adjust Menu Text Settings  */
       .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
       .navbar .nav > li.current-menu-item > a,
       .navbar .nav > li.current-menu-ancestor > a {
       display:        inline;
       color:          #7b0000;
       font-family:    century gothic;
       font-size:      2em;
       padding:        10px 10px;
       font-weight: bold;
       }
   
       /*  Reposition Navbar Box - change top/left as needed */
       .navbar.notresp .navbar-inner {
       position:       relative;
       top:            0px;            /* Adjust using -1px move Up, 1px move Down, 0px No change  */
       left:           0%;             /* Adjust using -1% move Left, 1% move Right, 0% No change  */
       }
   
       /* Edit background colour */
       body, #main-wrapper, header.tc-header, footer#footer .colophon {
       background-color: #EEEDEE;
       margin-top:     0px;
       margin-bottom:  0px;
       padding:        05px 0px;
       }
   
       /*  Adjust Navbar Colour      */
        .tc-header, .navbar.notresp .navbar-inner  {
       background-color:   #7b0000;                                       /* Change red */
       background-image: linear-gradient(to bottom, #EEEDED, #EEEDED);      /* Change white, pink */
       background-image: -webkit-linear-gradient (top, white, pink);   /* Change white, pink */
       background-repeat: repeat-x;
       border:           -1px solid pink;                               /* Change pink */
       border-radius:    4px 4px 4px 4px;
       box-shadow:       0 px 0px rgba(0, 0, 0, 0.067);
       min-height:       40px;
       padding-left:     20px;
       padding-right:    20px;
       }
   
       /* Remove all Navbar Box colours and shading  */
       .navbar,
       .navbar .navbar-inner,
       .navbar .nav {
           webkit-box-shadow:  none;
           -moz-box-shadow:    none;
           box-shadow:         none;
           filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
       }
   
       /* Adjust Menu colors - Hover */
       .navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
       color:          #7b0000;
       text-shadow:    none;
       }
   
       /* Adjust Menu colors - Normal */
       .navbar .nav > li > a, .navbar .nav > li > a:first-letter {
       color:          #2a2a2a;
       text-shadow:    none;
       }
   
       /* Adjust colors as needed */
       .footer-widgets {
       background:     none repeat scroll 0 0 #2a2a2a;
       color:          #5a5a5a !important;
       padding-top:    10px ;
       }
   
       footer#footer {
       color: #fafafa!important;
       border-top: 10px solid #7b0000;
       background: #2a2a2a;
       padding: 0;
       }
   
       /*Header Bar */
       header.tc-header {
       border-bottom:  10px solid #7b0000;
       }
   
       /* Make Carousel fade - adapt 5s to required delay */
       .carousel-inner > .item {
       -webkit-transition: opacity 5s ease-in-out ;
       transition:         opacity 5s ease-in-out ;
       }
       .carousel-inner > .next.left,
       .carousel-inner > .prev.right {
       opacity:        1;
       z-index:        1;
       left:           0;
       }
       .carousel-inner > .active.left {
       opacity:        0;
       z-index:        2;
       left:           0;
       }
       .carousel-inner > .active.right {
       opacity:        0;
       z-index:        2;
       left:           0;
       }
   
       /* remove previous/next arrows from home page only */
       .home .carousel-control {
       display:        none ;
       }
   
       /* Change Background, Border, Font/Color as needed  */
       footer#footer .colophon {
       background:     none repeat scroll 0 0 #7b0000;
       border-top:     12px solid #7b0000;
       color:          #7b0000;
       padding:        0;
       }
   
       /* Change Featured Pages Button color  */
       .btn.btn-primary.fp-button {
         color: white;
         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
         background-color: #7b0000;
         background-image: -moz-linear-gradient(top, #2a2a2a, #2a2a2a);
         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7b0000), to(#7b0000));
         background-image: -webkit-linear-gradient(top, #7b0000, #7b0000);
         background-image: -o-linear-gradient(top, #7b0000, #7b0000);
         background-image: linear-gradient(to bottom, #7b0000, #7b0000);
         background-repeat: repeat-x;
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000' , endColorstr='#000000' , GradientType=0);
         border-color: #000000 #00000 #000000;
         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
         *background-color: #7b0000;
         filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
       }
       .btn.btn-primary.fp-button:hover,
       .btn.btn-primary.fp-button:focus,
       .btn.btn-primary.fp-button:active,
       .btn.btn-primary.fp-button.active,
       .btn.btn-primary.fp-button.disabled,
       .btn.btn-primary.fp-button[disabled] {
         color: solid #7b0000;
         background-color: #7B0000;
         *background-color: #7b0000;
       }
       .btn.btn-primary.fp-button:active,
       .btn.btn-primary.fp-button.active {
         background-color: #b04d07 9;
       }
       .btn.btn-primary.fp-button:hover,
       .btn.btn-primary.fp-button:focus,
       .btn.btn-primary.fp-button:active,
       .btn.btn-primary.fp-button.active,
       .btn.btn-primary.fp-button.disabled,
       .btn.btn-primary.fp-button[disabled] {
         color: white;
         background-color: #2a2a2a;
         *background-color: #7b0000;
       }
       .btn.btn-primary.fp-button:active,
       .btn.btn-primary.fp-button.active {
         background-color: #b04d07 9;
       }
   
       /* Remove icon  */
       .page #main-wrapper h1.format-icon:before {
       content:        none;
       }
   
       /* START OF Adjust 3.2 Sticky Header */
   
       /* Remove Transparency */
       .sticky-enabled .tc-header {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
       }
   
       /* Remove Transparency / Add a border */
       .sticky-enabled .tc-header {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
        border-bottom: 10px solid  #7b0000; /* Adjust border|border-top|border-right|border-left & settings */
       }
   
       /* Stop Logo Size Reduction */
       .sticky-enabled .tc-shrink-on .site-logo img {
        height: 100% !important;
       }
   
       .sticky-enabled .tc-header {
       display:        inline;
       color:          #7b0000;
       font-family:    century gothic;
       font-size:      1em;
       padding:        10px 10px;
       font-weight: bold;
       }
   
       .tc-solid-color-on-scroll.sticky-enabled .tc-header {
        background-color: #EEEDED;
       }
   
       /* END OF Adjust 3.2 Sticky Header */
   
       @media all and (max-width: 768px) {
       .round-div {
       border: 94px solid #EEDEED;
       }
       }
   
       .nav-collapse .nav {
       float: righ;
       }
       .nav-collapse.tc-hover-menu-wrapper {
           width: 70% !important;
       }
   
       .navbar .nav > li > a, .navbar .nav > li > a:first-letter, .navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a {
           white-space: nowrap;
           line-height: 2em;
       }
   
       /*Adjust Colour around Circles*/
       .round-div {
       display: block;
       -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
       -o-transition: all .3s ease;
       transition: all .3s ease;
       position: absolute;
       width: 170px;
       height: 170px;
       z-index: 99;
       -webkit-border-radius: 60px;
       -moz-border-radius: 500px;
       border-radius: 900px;
       border: 104px solid #EEEDED;
       border-image: none;
       top: -66px;
       left: -54px;
       }
   
       /*Sticky Scroll Background*/
       .tc-solid-color-on-scroll.sticky-enabled .tc-header {
        background-color: #EEEDED;
       }
       ```
   
 * Thanks again for the help 🙂
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476072)
 * 3) My mistake
 *     ```
       @media all and (max-width: 768px) {
       .widget-front .round-div {
       border: 94px solid #EEEDEE;
       }
       }
       ```
   
 * 4) My mistake again
    Change first block to this:
 *     ```
       /* Adjust Menu Text Settings  */
       .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
       .sticky-enabled .navbar .nav > li > a, .sticky-enabled .navbar .nav > li > a:first-letter,
       .navbar .nav > li.current-menu-item > a,
       .navbar .nav > li.current-menu-ancestor > a {
       ```
   
 * Added a new line #2
 *  Thread Starter [russinternational](https://wordpress.org/support/users/russinternational/)
 * (@russinternational)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476073)
 * Thank you so much for the help here – made the website look much more presentable(
   and in some cases, functional!).
 * Really appreciate the help.
 *  [gomill](https://wordpress.org/support/users/gomill/)
 * (@gomill)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476081)
 * [@rdellconsulting](https://wordpress.org/support/users/rdellconsulting/) – regarding
   mistake 3) …I use Your CSS code, which works on large scale PC-monitors as well
   as on mobile- phones. But as soon as there is more space, in order to display
   all 3 favourites in narrow line, then the favourites become a rectangle again.
   Check on Your ipad or galaxy tab or other tablet. When it’s landscape the favourites
   display OK, but when it’s portrait format the mistake 3) is there again.
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476089)
 * [@gomill](https://wordpress.org/support/users/gomill/), are you going to quibble
   about 1px?!!
 * Should be `@media all and (max-width: 767px) {`
 * Based on the iPad being 768×1024, this is meant for everything smaller.
 * Not the first time I’ve hurriedly made the same mistake…
 *  [gomill](https://wordpress.org/support/users/gomill/)
 * (@gomill)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476093)
 * I never would quibble 😉 …no, irony beside … pls check [http://www.digitalfilm.ch](http://www.digitalfilm.ch)
   in a browser (MSIE, Firefox, Safari, Mac or PC).- If You reduce or enlarge the
   screen slowly, You will see what I mean: for a certain scale the favourites stay
   round, if smaller they become rectangles, and if even smaller they are again 
   round. I didn’t find a value (until now) where it worked over all screen sizes.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476108)
 * [@gomill](https://wordpress.org/support/users/gomill/), Please create a new thread
   to discuss this.
 *  [SMETech](https://wordpress.org/support/users/smetech/)
 * (@smetech)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476129)
 * If a new thread is created, please advise.
 * I’m having difficulty with the menu collapsing in to a sandwich style menu. The
   menu will collapse but it first wraps, where the items on the right are placed
   under the items to the left. Not sure how to correct this but am of the believe
   that it may be addressed in earlier posts. Here is the site: [http://www.smetech.us](http://www.smetech.us).
 * Relative novice at all this. Thanks for your help.
 * On another note, I’d like to have page specific footers and sidebars. If there
   is a more appropriate thread please direct me there. Otherwise, please let me
   know if this is something that can be addressed and how.
 * Thank you.
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476131)
 * [@smetech](https://wordpress.org/support/users/smetech/), Please create a new
   thread to discuss this.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Header and Menu Issues’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

 * 11 replies
 * 5 participants
 * Last reply from: [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/header-and-menu-issues/#post-5476131)
 * Status: resolved