Menu Position Problem
-
Hi all,
Just got a slight issue with the header. I am trying to get the text for the menu to be ‘centre’ with the organisation logo. This is so the header size stays the same when the sticky header is formed.
I presume it is a conflict with my custom CSS, but after a long time trying to edit certain parts, I cannot get the menu to move!
I’ve copied all of the CSS below. Thanks ??
/* 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 { display: inline; color: #7b0000; font-family: century gothic; font-size: 1.5em; padding: 0px 5.5px; font-weight: bold; } /* Reposition Navbar Box - change top/left as needed */ .navbar.notresp .navbar-inner { position: relative; top: -10px; /* 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: 20px; 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: 70px !important; } .sticky-enabled .tc-header { display: inline; color: #7b0000; font-family: century gothic; font-size: 1em; padding: 0px 10px; font-weight: bold; } .tc-solid-color-on-scroll.sticky-enabled .tc-header { background-color: #EEEDED; } /* END OF Adjust 3.2 Sticky Header */ /*CIRCLE BACKGROUND COLOUR*/ @media all and (max-width: 768px) { .widget-front .round-div { border: 94px solid #EEEDEE; } } /*STICK NAV BAR SIZE*/ .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: 3em; } /*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: -67px; left: -54px; } /*Sticky Scroll Background*/ .tc-solid-color-on-scroll.sticky-enabled .tc-header { background-color: #EEEDED; } .carousel-inner { top:20px; box-shadow: 0px 0px 5px 1px #000000; }
Thanks again.
Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
- The topic ‘Menu Position Problem’ is closed to new replies.