Community Forums › Forums › Archived Forums › General Discussion › Navigation Bar
Tagged: mobile website
- This topic has 6 replies, 2 voices, and was last updated 6 years, 7 months ago by susanholt.
-
AuthorPosts
-
September 5, 2017 at 7:19 pm #211134susanholtMember
Hi,
I'm very new to CCS and looking to do some minor tweaks to my site. I'm looking to change the color of my nav bar on the mobile version of my site and also to move it to the bottom of my page. Can anyone tell me how to change the color to black and change the opacity as well? Can I use dream weaver to change the coding?Is that what you recommend? I've never done this before. Thank you!
http://945.0f6.myftpupload.com/September 6, 2017 at 5:39 am #211142Victor FontModeratorThe best way to learn CSS is to learn how to use your browser's built-in inspection tool. All browsers have a similar tool that allows you to view the HTML source code and corresponding CSS. Here's something that will help you. https://victorfont.com/how-to-use-your-browsers-inspect-tool/
Let's work on the menu location first. You're theme, Atmosphere Pro, allows you to have both a header and footer menu. When you load a web page into a browser, the browser loads elements in the order in which they are generated by WordPress. This load order is called the Document Object Model or DOM. Once the DOM is created in your browser, it is very difficult to move things around without writing a log of code. It's complicated.
Your menu is in the header menu position. You can also display the same menu in the footer menu position by just checking the footer menu box in the Display Location area on the Appearance/Menus page. With the menu displayed in both locations, you can hide the footer menu with CSS for large screen views, display it and hide the header menu for small screen views.
To hide the footer menu for large screen views, add display: none to the nav-secondary CSS found around line 1357 in style.css:
.nav-secondary { margin-top: 10px; display: none; }
To display the footer menu on mobile devices and hide the header menu, we have to edit the media query CSS located near the bottom of style.css. In this case we're going to add some CSS to the @media only screen and (max-width: 1024px) that can be found around line 1714:
#genesis-mobile-nav-primary { display: none; } .nav-secondary { display: block; }
The secondary menu in the footer will not have the hamburger menu without a lot more coding, but this will provide the basics of what you are seeking.
As for the background color, you can add a color to the nav-primary class.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 6, 2017 at 6:12 am #211148susanholtMemberHi Victor,
Wow, thank you for taking the time to share your wealth of knowledge, it's very kind of you. I will have a look at this when I get back from work. Thank you so much!!
Susan
September 8, 2017 at 8:27 pm #211230susanholtMemberHi Victor,
I wasn't able to find:
I did a search using ctrl+f also I could find the line numbers, they weren't displayed on my end. Any ideas? Thank you!!
Susan
September 8, 2017 at 8:34 pm #211231susanholtMemberVictor,
Where might I find the nav-primary class to change my nav bars color from white to black and drop the opacity to 20%? I couldn't find "nav-primary class" in my CSS. Thank you!
Susan
September 9, 2017 at 7:35 am #211242Victor FontModeratorYou have to add the classes yourself to style.css.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 12, 2017 at 7:17 pm #211384susanholtMemberVictor,
How much would you charge to knock these out for me? Thank you I may be reached at [email protected]
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.