Header and Menu Issues

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;
}

2) Not seeing a double menu

3)

@media all and (max-width: 768px) {
.round-div {
border: 94px solid #EEEDEE;
}
}

4)Snippet

You need to look at the css you’ve added and correct with the above changes

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

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

Thank you so much for the help here – made the website look much more presentable (and in some cases, functional!).

Really appreciate the help.

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

@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…

I never would quibble ?? …no, irony beside … pls check https://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.

@gomill, Please create a new thread to discuss this.

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: https://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.

@smetech, Please create a new thread to discuss this.