Navigation menu doesn’t work on mobile devices. Also I cannot make the menu sticky, meaning that it sticks on the top of a page while scrolling down.
can you help me?
]]>I’m new here but would really love some assistance with two issues.
(1) My blog’s header seems to be displayed properly on desktop. However the logo, mobile menu and search icon don’t display well in mobile devices.
Also the mobile menu is not clickable when search is enabled because it seems the search form overlaps the menu icon.
Is there a way that I can put the three to be displayed in the same line in mobile devices(menu, logo, and search icon) in top navigation bar using CSS?
(2) On desktop my theme has been designed to fit in a container and somehow the sidebars won’t show properly on homepage or won’t show at all.
How do I overide this? I was hoping I could get a way to make the homepage full width with sidebar(s).
? I have included a link to the homepage; see in mobile version.
Thank you in advance.
I’ve been working on this for over 2 days and I’m really stuck. I’m a basic user with very basic IT/site knowledge but having read through forums for the last 2 days I need help please.
The menu buttons take me to the top of page, rather than the section.
My single-page site menu buttons have https://homepage-url/#CSS ID tags on and these DO work on mobile but not on laptop/tablet.
Each section DOES have the CSS ID in the Divi Builder box. (about, demos, etc)
This happened after a few things changed:
– I updated plugins. (After discovering the issue and reading tips online, I deactivated each plugin in turn but still nothing worked)
– I got help from the hosting customer service re updating php because the site was loading really slowly/timing out and I was getting ‘Flash of Unformatted Text’ at start up. (Fine now)
– I changed the permalinks to postname. (I know! It’s just a static page and I changed it from one of the date options to postname before reading I shouldn’t have done that. I tried changing it back to each of the other four options but nothing worked.)
– Cache was cleared in WordPress.
– Cache was cleared on both mobiles and both laptops in case that was showing cached info.
I don’t know why it works on mobile and not pc.
Can anyone give me any ideas please? I’m not a coder of any kind and know nothing about html at all, just the Divi Builder blocks..!
Thank you very much.
]]>Okay, so I’ve tried to customize the Primary Navigation Menu using the following code:
/*Main Navigation Menu*/
.main-navigation {
background-color: white;
border: 1px black;
border-style: solid none;
height: 40px;
/*width: 1020px;*/
}
/*Main Navigation Menu Text*/
.main-navigation .main-nav ul li a, .main-navigation .menu-toggle {
color: black;
letter-spacing: 0.15em;
text-transform: uppercase;
font-size:0.8em;
line-height: 40px;
}
/*Main Navigation Menu Text appearance when you hover on the links*/
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a {
color: black;
background-color: white;
text-decoration: underline;
}
Things look great on the desktop site, but in the mobile version, the Navigation Menu options (in the drop down) overlap with the blog content. Furthermore, when you click on “Menu,” the text disappears – i.e., I think that the color for the visited “Menu” link is set to white. I’m not sure how to push the blog text down so that the drop down menu doesn’t overlap, and also change the visited “Menu” link color to black?
Also, as long as I’ve got your attention (ha!), I would love to anchor the width of the Primary Navigation Menu to the width of the website content – so, the top and bottom borders of the Navigation Menu should end at the left border of the blog and the right border of the “Search” button. I’ve tried to shoehorn in a clunky fix by setting the width of the Main Navigation Menu to 1020px (it’s in my code, but currently commented out), but this makes things wonky when you shrink the screen, and especially wonky in the mobile version. Is there any way to have the Menu bar be flush with the current left border of the blog container and right border of the right sidebar, but also maintain the mobile-responsive appearance when the screen is shrunk?
Sorry this has been so rambling. Thank you so much in advance for any help you can provide!!
]]>.main-navigation {
display: block;
float: left;
margin: 0 auto;
max-height: 64px;
position: relative;
}
ul.nav-container,
.nav-container > ul {
margin: 0;
padding: 0 20px 0 0;
}
.nx-no-search ul.nav-container,
.nx-no-search .nav-container > ul {
padding: 0px;
}
.nav-container li {
display: inline-block;
position: relative;
padding: 0px 0px;
margin-top:-5px;
}
.nav-container li a {
height:64px;
color: #545454;
display: block;
/*line-height: 1;*/
padding: 20px 20px;
text-decoration: none;
position: relative;
margin-top:5px;
}
.nav-container ul ul li {
padding: 0px;
}
.nav-container ul ul li a {
padding: 15px 20px;
}
.nav-container .current_page_item > a,
.nav-container .current_page_ancestor > a,
.nav-container .current-menu-item > a,
.nav-container .current-menu-ancestor > a,
.nav-container li a:hover {
color: #FFFFFF;
background-color: #dd3333;
}
.nav-container li:hover > a,
.nav-container li a:hover {
color: #FFFFFF;
background-color: #dd3333;
}
/* variable color */
.nav-container .sub-menu,
.nav-container .children {
background-color: #FFFFFF;
border-top: 2px solid #dd3333; /* variable color */
display: none;
padding: 0;
position: absolute;
left: 0px;
z-index: 1002;
/*top: 64px;*/
-webkit-box-shadow: 0px 3px 2px 1px rgba(0,0,0,0.06);
-moz-box-shadow: 0px 3px 2px 1px rgba(0,0,0,0.06);
box-shadow: 0px 3px 2px 1px rgba(0,0,0,0.06);
}
.nav-container .sub-menu ul,
.nav-container .children ul {
border-left: 0;
left: 100%;
top: 0px;
margin-top: -2px;
}
.nav-container li:last-child .sub-menu ul,
.nav-container li:last-child .children ul {
left: 0%;
right: auto;
width: 200px;
margin-left: -200px;
top: 0px;
margin-top: -2px;
}
ul.nav-container ul a,
.nav-container ul ul a {
margin: 0;
width: 200px;
border-top: 1px solid #e7e7e7;
padding: 10px 16px;
}
ul.nav-container ul li:first-child a,
.nav-container ul ul li:first-child a {
border: none;
}
ul.nav-container ul a:hover,
.nav-container ul ul a:hover {
color: #FFF;
background-color: #dd3333;
}
https://linustechtips.com/main/uploads/monthly_2017_11/image.png.a38f7ce6e71e9337510b9261e1a8d64f.png
do you guys know know how to fix this?
]]>I need to make the site menu sticky, meaning, it will scroll along with the site content. Is this possible with this theme?
]]>I tried to move the menu but without success.
Actually it’s like this:
While i would to move the menu like in this image, under the header:
If someone can give me an hend i will be very happy.
Thank you for the support,
Cheers