I made a webpage, but I have a problem with my menu CSS.
http://www.kezszobor.hu
My problem is that when the mouse hovers over the menu, the hover background does not fit the full button.
This is a Joomla + Cinch Menu module.
Can anyone help me?
Use this CSS:
ul.flyout-menu .menu-link a:link {
min-height: 30px;
}
ul.flyout-menu.text-left .menu-link {
height: 30px;
margin-right: 0;
}
ul.flyout-menu .item-wrapper {
height: 30px;
}
ul.flyout-menu li {
height: 30px;
}
If you put it at the bottom of template.css file, it will overwrite the current values and you should be set to go.
Related
My logo is overlapping my menu bar I just went to space it from overlapping
I tried changing the code but I'm a novelist so I really don't know what works I know about HTML but it's not the same.
.navbar-nav > li > a {
font-size: 20px;
}
.nav { right: 10px; }
Whenever I change the code it messes up the font size and it still over lamps
Here is the website:http://143wear.com
As you are using WordPress, through Admin dashboard you can set the max-width: 146px; to Logo,
Else you can use the following code into CSS,
By using this code there will be least chances for responsiveness issues,
In case you need bigger logo, you have to customize the code.
.site-header .logo img {
max-width: 146px;
}
.container {
width: 100%;
}
.header-logo {
width: auto;
}
.header-right {
width: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
justify-content: space-between;
}
Would be a working solution (might need some improvements for responsibility)
I'm making an website with DIVI, and used custom CSS code to skew and style the menu buttons, but now i have this strange effect on drop-down submenus when they are out of the style completely.
I was trying to apply same styles for drop-down items, but nothing seems to work.
Maybe anyone ran in this problem? You can check the website live - http://steel.cody.lt and the problem is with PRODUCT menu dropdown.
Add this css and try
#top-menu-nav #top-menu li li {
margin: 0;
padding: 0 0px;
line-height: 2em!important;
width: 100%;
transform: skew(-1deg);
}
#top-menu-nav #top-menu li li a {
width: 200px;
padding: 6px 0px;
width: 100%;
}
My toggle menu bar is not showing in mobile view. my website is http://gtcgroups.com/ . When I decrease the window size the menu is not showing. How to fix it. I am currently using WPtouch plugin but its not showing logo of website that's why i want to do it through custom code for toggle menu.I have tried different codes but not working
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
This is because of your written CSS in your custom.css
.header-wrap {
height: 30px;
width: 1200px;
margin-top: 0px;
}
replace it by
.header-wrap {
height: 30px;
width: 1200px;
margin-top: 0px;
max-with:100%
}
I recently added a widget to my website header for desktop mode. I struggled getting this widget to be on the same line and off to the right of the logo, but I eventually got it. In the process, it appears I messed up how the header looks on mobile devices (refer to twoguysplayingzelda.com for an example). Since 65% of my viewership is via mobile, I would like to fix this but have not figured out how. I would like the logo to be centered, completely view-able, and the menu icon on the left side (it use to be before I made the change). I am aware that I need to add coding into the responsive section of my style.css. Below is what I currently have for my header in CSS (desktop section). I knew nothing about CSS and HTML before I started my website, so I am still somewhat of a noob. Thanks for your help
div#header-widget-area {
float: right;
}
.header {
padding-top: 10px;
padding-bottom: 60px;
color: #01B3D9;
}
.header .cover {
background: rgba(29,29,29,0.0);
}
.header-inner {
position: relative;
}
.header .blog-logo {
text-align: left;
}
.header .logo {
display: inline;
float: left;
}
.header .logo img {
max-height: 50px;
width:auto;
}
The menu icon is pushed to the right by the logo because they both have float: left.
Try to remove float: left from .logo, and add display: inline-block to .blog-logo. That should fix both of your issues.
I am using the travelify theme to build my website and for the most part I am really happy.
How would I add the lace image below the navigation bar as seen in the image? I can do it in firebug but have no idea how this would work with travelify and css.
http://test.modellicreations.com/wp-content/uploads/2015/02/laceundernav.jpg
Also, how would I replace the footer dashed border line with an image?
Lastly, how do I put a border/outline around the entire table? Every code I have tried puts a border around every cell which I do not want.
You can see the site here:
1: http://test.modellicreations.com
Thank you in advance!
You can add the image with css, add this class in your css file style.css :
nav#main-nav:after {
content: '';
background: url('http://test.modellicreations.com/wp-content/uploads/2015/02/lacebarflip.jpg') no-repeat;
display: block;
width: 100%;
height: 22px;
visibility: visible;
}
#main-nav {
background: #006666;
border-color: #006666;
border: none;
}
Yes you can replace footer dashed border to an image with this style :
#site-generator:before {
background: url('http://test.modellicreations.com/wp-content/uploads/2015/02/lacetop.jpg') no-repeat;
content: '';
height: 20px;
display: block;
position: relative;
bottom: 20px;
}