athbot
Forum Replies Created
-
Hello , after a lot of tinkering and failures,and many thanks @d4z_c0nf from above for the fix he offered and worked, i have reached at the way i want my navigation bar and dropdown menus to look.Although i still have a problem. As you can see in the picture ( https://www.dropbox.com/s/9t951phnvckolod/nav_bar.jpg) my main navbar is set with colors i want, but the first dropdown menu instead of being all gray i have white borders on top and bottom which i want it to be all gray. I have tried seing the code from chrome and have managed to see what i should be changing but when i try to change it at the style.css file i always fail.Although i have managed to do it at the second drop down as it shows in the picture i can’t do it at the first.This is my style.css file
/*changing color for header start*/ header.tc-header { min-height: 40px; background: #7E8484; border-bottom: 10px solid #7E8484 border-top: 15px solid #7E8484 } /*changing color for header end*/ /* Adjust Menu (red) text color, (Times New Roman) font-family, (2.0em) font-size start */ .navbar .nav > li > a, .navbar .nav > li > a:first-letter, .navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a { position: relative; top: -20px; /* Adjust using -1px move Up, 1px move Down, 0px No change */ display: inline; color: red; font-family: TimesNewRoman; font-size: 2.0em; font-style: italic; font-weight:bold; padding: 15px 15px; } /* Adjust Menu (red) text color, (Times New Roman) font-family, (2.5em) font-size end */ /* Adjust Navbar Box settings start */ .navbar .navbar-inner { background-color: red; font-family: TimesNewRoman; font-size: 1.0em; background: #E5E5E5; background-repeat: repeat-x; border: 5px solid darkgray; border-radius: 20px 20px 20px 20px; box-shadow: 50px 30px 30px rgba(0, 0, 0, 0.067); min-height: 15px; padding-left: 55px; padding-right: 45px; padding-bottom: 5px; } /* Adjust Navbar Box settings end */ /* Reposition Navbar Box - change top/left as needed start */ .navbar.notresp .navbar-inner { position: relative; top: 3px; /* Adjust using -1px move Up, 1px move Down, 0px No change */ left: -5%; /* Adjust using -1% move Left, 1% move Right, 0% No change */ } /* Reposition Navbar Box - change top/left as needed end */ /* Change Slider Titles (2em) font-size, (TimesNewRoman) family, (blue) color start */ .carousel-caption h1 { font-family: TimesNewRoman; font-size: 2em; color: blue; } .carousel-caption p { font-family: TimesNewRoman; font-size: 2em; color: green; } .carousel-caption .btn { font-family: TimesNewRoman; font-size: 2em; color: yellow; } /* Change Slider Titles (2em) font-size, (TimesNewRoman) family, (blue) color end */ /* Adjust dropdown Menu items start */ .dropdown-menu > li > a { font-family: TimesNewRoman; font-style: italic; font-weight: bold; font-size: 1.6em; color: red; background: #e5e5e5; top: 38%; left: 5px; } /* Adjust dropdown Menu items end */ /* for the second drop-down start */ .dropdown-menu li ul.dropdown-menu { top: 1px; left: 161px; background-color: #e5e5e5; } /* for the second drop-down end */ /*Triangle under navbar fixed*/ .navbar .nav > li > .dropdown-menu:before { border-bottom: 1px solid rgb(225, 225, 225); background-color: #e5e5e5; } .navbar .nav > li > .dropdown-menu:after { border-bottom: 1px solid rgb(225, 225, 225); background-color: #e5e5e5; /*Triangle under navbar fixed*/ /* Change color of the button Read More start */ .btn-primary,.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { color: yellow; background-color: #005580; font-style: bold; font-family: TimesNewRoman; } /* Change color of the button Read More end */Could you please tell me what i should change and how because i can’t seem to find it. Thanks in adnvance.
Thanks you very much i’m starting to get somewhere, i’ll tweak it as you said , it’ been very helpfull , i’ll also be digging to the site you linked very good information , thank you, i’ll be back with updates.
Hello , i would to ask something , as there has been some changes , to the website design, now what is looks like is this testing site
and what i would like to do is movethe final windows that says Tecnoalarm and Nova Security forward a bit so that i can see the two options behind it clearly. Can it be done and how?
Also this the CSS code till far/*changing color for header start*/ header.tc-header { min-height: 40px; background: #7E8484; border-bottom: 1px solid #7E8484 border-top: 1px solid #7E8484 } /*changing color for header end*/ /*changing color for social icons start*/ .social-block a, .social-icon { color: #0000FF; } .social-block a:hover, .social-icon { color: #FF0000; } /*changing color for social icons stop*/ /* Adjust Menu (red) text color, (Times New Roman) font-family, (1.5em) font-size */ .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: red; font-family: TimesNewRoman; font-size: 1.5em; font-style: italic;font-weight:bold; padding: 1px 10px; } /* Adjust Navbar Box settings */ .navbar .navbar-inner { background-color: red; background-image: linear-gradient(to bottom, white, #F2F2F2); background-repeat: repeat-x; border: 3px solid lightgray; border-radius: 15px 15px 15px 15px; box-shadow: 50px 30px 30px rgba(0, 0, 0, 0.067); min-height: 20px; padding-left: 20px; padding-right: 20px; } .btn-navbar { width: 90px; height: 30px; vertical-align: top; } .btn-navbar:after { content: "Menu"; float: right; margin: -16px 0 0 0; } ul.nav li.dropdown > ul.dropdown-menu { padding-top: 3px; margin: 0; } .nav > li > a.a-caret { display: block; padding: 8px; position: absolute; height: 10px; width: 10px; top: 1px; left: 10px; } .nav > li > a.a-stripped { padding: 5px 2px 5px 38px; } .navbar .nav .dropdown-toggle .caret { margin-top: 10px; margin-left: 5px; } .navbar .nav > li > .dropdown-menu:before { left: 3px; } .navbar .nav > li > .dropdown-menu:after { left: 3px; } .navbar .navbar-inner { box-shadow: 0 2px 15px rgba(0,0,0, 0.12); } /*Triangle under navbar fixed*/ .navbar .nav > li > .dropdown-menu:before { border-bottom: 1px solid rgba(153, 153, 153, 0.27); } .navbar .nav > li > .dropdown-menu:after { border-bottom: 1px solid rgba(255,255,255,.9); /*Triangle under navbar fixed*/ } .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle { background-color: #ececec; border-radius: 12px; box-shadow: inset 0 2px 3px rgba(0,0,0,.35); } @media (min-width: 980px) { ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu, ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu, ul.nav li.dropdown ul.dropdown-menu:hover { display: block; z-index: 1001; } } @media (max-width: 979px) { .nav > li > a.a-caret { box-shadow: 0 2px 3px rgba(0,0,0,.35); height: 2px; width: 2px; top: 2px; left: 5px; } .nav > li > a.a-stripped {padding-right: 45px; padding-left: 45px;} ul.nav li.dropdown.open ul.dropdown-menu { background-color: #ececec; border-radius: 4px; box-shadow: inset 0 2px 3px rgba(0,0,0,.35); } .dropdown-submenu > a:after { border-left-color: transparent; border-top-color: #ccc; border-width: 5px 5px 0 5px; } .dropdown-submenu:hover > a:after { border-top-color: #fff; } .dropdown-submenu:hover > a:after { border-left-color: transparent; } ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu ul.dropdown-menu { background-color: black; box-shadow: inset 0 1px 4px rgba(0,0,0,.27); display: block; position: relative; margin-right: 4px; bottom: 2px; } ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu:hover > a { color: white; } } .navbar .nav li.free_download.btn { position: relative; bottom: 10px; padding: 2px; line-height: 19px; vertical-align: middle; } .navbar .nav li.free_download.btn a { color: #FFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.31); padding: 3px 13px; } .btn-navbar { width: 90px; height: 30px; vertical-align: top; } .btn-navbar:after { content: "Menu"; float: right; margin: -16px 0 0 0; } .format-icon:before { speak: none; text-transform: none; -webkit-font-smoothing: antialiased; padding-right: 10px; opacity: 0.2; position: relative; top: 8px; display: none; font: normal normal 1.2em/1 'entypo'; font-family: TimesNewRoman; } .dropdown-menu { background-clip: padding-box; background-color: #F2F2F2; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); display: none; float: right; left: 0; list-style: none outside none; margin: 2px 0 0; min-width: 160px; padding: 5px 0; position: absolute;Thanks in advance.
I would like to make a coorection about my theme, it’s the customizr child theme, and @electricfeet i checked and removed all the CSS changes i had done and the drop down menu was still the same.
@rdellconsulting i ‘ll be checking their website to see if i can use it.Haven’t anything like that before so i’ll come back with either results or more questions.Thanks in advance.