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%
}
Related
I've tried reordering the menu with css "order: 1;" etc, but I cannot moove the hamburger button on the right.
In wordpress there is no way the edit the menu (I can just edit the link and logo image), and I guess I need to do it by code.
The website is: https://materassibifulco.it (look at the mobile version)
I need to make the cart icon the last one, and the hamburger menu the first.
Thank you very much! If you need more information just ask me
I have checked the menu is placed with position: absolute; and it harder to align with simple order:1;
try this code it helps you
#media (max-width:767px){
.header_mobile .octf-btn-cta {
padding-right: 0;
position: absolute;
right: 0;
}
.mobile_logo {
display: inline-flex;
justify-content: center;
width: 100%;
}
.mobile_logo a img {
left: 0 !important;
}
.octf-header-module:nth-child(2) {
display: none;
}
#mmenu_toggle {
left: 0px;
}
}
In inspector after this style it looks like
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%;
}
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.
I am using prettyphoto to display images and video in a gallery. However, the social buttons are getting truncated. I tried changing the overflow attribute to auto in the prettyPhoto CSS, but all that does is add a scrollbar. This happens regardless the size of the photo or video (see screenshots below). Is there a way to fix this?
Had the same problem.
Changed the CSS for the social buttons as so:
.pp_social { float: left; margin: 0; width:450px;}
.pp_social .twitter { float: left; width: 90px; }
.pp_social .facebook { float: left; margin-left: 15px; width: 80px; overflow: hidden;}
Hope this helps.