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
Related
How do i get a fixed navigation for my website? i want the menu on my site to remain stick to the page as the user scroll downs to see the content.
The navigation disappears as the user scroll down at the very bottom of the page. How do i make it stay? I tried using this but it doesn't work.
/* The sticky class is added to the navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Here's the link of my site.
https://kickthebuddyapk.com/
Thank you!
Try to remove
.nav-secondary {
margin-top: -100px;
padding-top: 100px;
}
and replace with
.nav-secondary {
position: sticky;
top: 0;
background: white;
}
Try to add:
#genesis-mobile-nav-secondary{top:0; position:sticky;}
I want to add to my site based on Bootstrap 3 Affix feature for bottom navigation links. These links fixed on the bottom and added offset for the footer.
But when I scroll to the footer I see the navigation do some small "jump".
All work as need, even if I toggle to a mobile panel in Google Chrome. But excluding real mobile devices. In any case, I tried on three Android devices.
I added a link to a short video from the phone screen for clarifying: https://imgur.com/a/lcBASRD.
Please see to the bottom of the screen.
CSS:
#nav_affix {
left: 50%;
margin-left: -70px;
width: 140px;
z-index: 99999;
}
.affix {
position: fixed;
bottom: 0;
}
#nav_affix.affix-bottom {
position: absolute;
}
#nav_affix div.next {
float: right;
}
#nav_affix div.prev {
float: left;
}
#nav_affix div.next,
#nav_affix div.prev {
width: 60px;
height: 60px;
border-radius: 10px;
}
JS:
$('#nav_affix').affix({
offset: {
bottom: $('.footer_wrap').outerHeight(true)
}
});
Any ideas?
Thx for any answer.
Best.
You should place footer in a wrapper with same height as footer. Thus, when footer placing its original position, it will not make a jump.
I have done this with dynamically but also static height will solve the problem.
$('#nav_affix').on('affix.bs.affix', function () {
$('#footer-wrapper').height($('#nav_affix').outerHeight(true))
});
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)
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.